I can not get my images to show up when I upload my site to heroku. I've used relative paths with previous apps in the past but I do not know why they are not working in this case. I've tried adding ../ /../ and absolutely nothing has worked.
my heroku app
Assuming that the paths are correct, check the filename extensions of your images in heroku. Sometimes if your images are saved with the filename extension written in upper case, you can get this kind of problems.
Related
I am building a website and along the way I used imgur to store the image that i was using in it but I decided to created a folder in my app to store them.
Since I'm not using imgur anymore, i needed to change my path to find the image and that's where the problem appeared, I can't find the image.
The structure looks like that:
webapp_folder
|_node_modules
|_image_folder
|_public_folder
|_views
|_partials_folder
|_main.js
|_app.js
|_package.json
In main.js, I use one of the image in image_folder and the path to the image looks like: src="../image_folder/image.png" but that's where I got the 404 error.
I've tried putting the image in the same folder that the main.js so the path would look like src="image.png" but still getting this error.
So i guess it's not a path's problem but I've no idea what it could be.
Hope I could make it clear!
I'm using node.js and express.
You need to make routes to the assets.
app.use(express.static('image_folder')
Whenever you are using an asset there are multiple ways to include that in your project.
In your case, whenever an image is loaded it is actually loaded by the browser using network calls from client side. Not server side. So client side code doesn't have access to internal paths (for ex: /usr/local/ kinda paths). Whenever they fetch something it is relative to the host, maybe in your case localhost so, fetching /image.png is fetching localhost/image.png but your app doesn't have route to those image files. So, we make routes for all the assets which is done by express.static
Another way is you can actually require the image. So, bundlers (with proper config) make some public folder and put the assets to that folder. react/vue apps by default do this.
been looking around here for a bit but still haven't found an answer.
Have an issue with a site I'm working on. Site is entirely self contained in a folder. Trying to reference one image for a parallax section on the website. Referenced like this in the main css file:
#services {
background-image: url("../images/dark.JPG");}
Main css file is located in maindir/css. Image that I'm looking for is located in maindir/images/.
It worked locally, so I tried to upload the entire folder to my testing domain. However, when I load up the site, this one specific image doesn't come up. I can confirm in FileZilla that the file uploaded without a problem, and can download and confirm that the file's intact. Other images load without a problem, but trying to replace this specific image with any other image yields the same results.
Is this something I may be doing wrong or potentially an issue with my webhost? Going through Lunarpages and have had a few random buggy incidents like this before, but I wanted to figure out if it was my own ineptitude to begin with haha. Again, nothing is stored anywhere on the computer - all local to the folder the rest of the site is in.
Like I figured in my comment, it's a capitalisation issue. On your local machine, where the file system is case insensitive, it's no problem to use "JPG" to access a file ending in "jpg". However, on the Apache server, case does matter.
http://nearsighted.ninja/images/dark.jpg loads
http://nearsighted.ninja/images/dark.JPG does not load!
Solution: write the filename in your css exactly as it is, with lowercase "jpg". (Or, rename the file.)
You are probably developing on a Windows machine, and deploying on a Linux machine. Windows file system is case insensitive, so .jpg and .JPG and .Jpg are all the same.
On Linux, where you're deploying, the file system is usually case-sensitive. Which means xxx.jpg and xxx.JPG are interpreted to be different files.
It's always better to use the same environment for both development and deployment. You can install a virtual machine for testing your work locally.
I have been working on a website, viewing it locally on my computer. However, when I upload it to my server, it does not look good at all, as though it is missing files. Is there a way to check to make sure 1) everything uploaded 2) that any files referenced are indeed there and 3) that no files are referenced locally (all files are referenced relative to the site?
In Dreamweaver, you can upload the root folder which will upload everything within it. This is at least true with the latest Creative Cloud version which you can connect directly to your server.
Also if you use Chrome you can right-click, Inspect Element to view the code. You can see if there are any files missing.
I deployed my static HTML website to Heroku using this tutorial (http://www.lemiffe.com/how-to-deploy-a-static-page-to-heroku-the-easy-way/) and my pictures won't show up ? It works perfect locally so I don't really understand why it doesn't when it's deployed on Heroku ?
I've also looked up every other solution that stackoverflow has to offer and nothing worked for me. Any help is really appreciated
Here is the order of my folders/files (folders are capitalized):
-RESUMEAPPCOPY
-home.html
-portfolio.html
-index.php
-aboutme.html
-PUBLIC
-IMG
-JS
-CSS
Code for image:
<img src="/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
Whenever I inspect the element on Heroku it says :
Failed to load resource: the server responded with a status of 404 (Not Found)
and where the picture is supposed to be I have the typical broken image link picture
Your <img> tag is pointing to an absolute path that exists on your local filesystem, but does not exist for your Heroku app. Instead, provide a relative path (relative to the HTML file invoking the <img> tag, that is) to your image asset, commit the change to version control, then redeploy to Heroku.
Assuming that your public directory is actually nested within the resumeappcopy directory, the following path should work:
<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
UPDATE:
Note that the cited asset URL points to an asset with the file extension PNG in uppercase. However, the file's actual file extension is png – in lowercase (see here). Your local filesystem is probably insensitive to case when looking up a resource – but Heroku is not. You'll need to ensure that you're properly invoking the correct casing for resources when you deploy to Heroku.
I had the same problem and found the problem to be the capitalized file type ('.PNG'). I believe Heroku is searching for files without any .toLowerCase() function applied. Which means you must request an exact match between your markup and your file with capitalization being important.
This wasn't a problem on my local node / express server but became an issue after deploying to Heroku. Some of my images were showing up but others were getting 404 errors (i.e. the ones with capitalized file types). The smart thing to do is to always make your file types are lower case.
I changed this:
<img src="public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
To this:
<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>
I hope this helps anybody that came across this issue as it confused me for at least an hour. Good luck!
You are giving an absolute path to the image:
/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG
The image works locally, but cause this directory exists on your local machine; it does not exist on Heroku.
You need to use a path that is relative to the directory being served by Heroku / your server:
/../PUBLIC/img/PennUnitedWebsite.PNG
(this assumes that your link exists in an HTML file in the RESUMEAPPCOPY directory)
The only answer that hits the nail right on the head: Heroku is case-sensitive!
Took me half a day to figure that out!
Well , whenever your Web-page's contain HTML, CSS and JavaScript , so follow just 2 steps :
1) Make one file give name as index.html (keep evreything in it) ex:script,stylesheet & body.
2) Now, change these file, copy and paste these same file but change domain to index.php
Then deploy on a Heroku , Keep your images downloaded in one folder with index.html
Hence this method will help you to deploy your Web-Pages
In summary, to properly load the images:
1) Use relative url path relative to index.html
2) image file extension needs to be png instead of jpg, and write it in lower case, eg: "cat.png"
Heroku is case sensitive with images so make sure all your images are set to lowercase names.
Referencing from the frontend view "catPicture.png" won't work but "catpicture.png" will work. It's a big quirk! Took me hours to solve this.
If the image has a large size it will not load on the Heroku on a free version.
You can resize the image in an image editor (ie: paint) to reduce the size but it will also reduce quality.
Then push by the following commands
git add .
git commit -m "resize"
git push heroku master
It should work 👍👍
I had the same problem: case-sensitive png files. But to fix the issue I suggest lowerCasing them AND changing the name of the image file. This way you can be safe (and more organized in your versions) when you commit them to git and push to heroku
I had the same problem.
change the jpg image file to png.
worked for me
I had similar problem recently on Windows OS. Pictures loaded properly when tested localy, but on heroku some of the pictures were loading while others where not. And pictures were in the same folder! My paths and script were correct, but as others mentioned it was a case-sensitivity problem. I renamed the files, uploaded again but it didn't help. Why? Because changing the letter case is not recognized as real change for git on windows. To properly load newly named files i did those steps (all commands can be found at heroku tutorial pages):
Destroy heroku app and make a new one
Delete .git folder from your directory
Create new git remote for your app
Push all your files again
This way, heroku files will have names of files the way you like. Worked for me.
I'm trying to load images from a relative folder /media/one.jpg but it never loads, I use the same script to load from my local folder and it does.
The absolute path e.g c:/mydir/one.jpg does not work either. Earlier I used to throw things at my server and get jpegs from there. But for testing purposes I need these images locally available.
Any Idea?
Just solved it Use loadImage("media\ears.jpg"); double slash instead to single and it works :)
For security reasons flash files can access only web or only local files, with can be set in the project properties. If you want to build a web application like a webpage or just a part of a webpage, than you should choose network only, but this way you can test your work only on a webserver (that can be localhost too ). If you want to build a desktop application, witch has no relation to web, then select the "local only" option in your project properties.