image is not showing in my application after uploading but it showing if i made any changes in angular application.
Error in console
but there is file in respective location but it didn't show until any change in angular application
Basically in angular you can load dynamic image by this way.
<img [src]="yourImagePath" />
Path should be like this.
assets/posts/image.png
First try to print image name in for loop and check path is correct or not.
Second thing I suggest you to use ng-template feature of angular. This is the one of the most powerful feature of angular. This is mostly used to show Or load dynamic content in web page.
Note: Make sure that space should not exist in image path.
If sill you are not able to load or access your image then you can try this also.
1) You should try to load image from angular's app path instead if assets path.
[src]="app/path/assets/posts/image.png" // Make path as per your structure.
2) Another option :
[src]="./assets/posts/image.png">
Update
The thing is, when you are running ng serve that triggered in memory webpack dev server - not a thing you want to run on your server, that is for dev only. This way, until you restarted ng serve, you wont get any changes happend in your assets folder as it is default folder for your static assets configured in .angular-cli.json.
So when you access assets folder dynamic, It's not possible you have to restart the app.
Solution :
I suggest you to use another location to access your dynamic images.
For an instance: You can upload a new images at...
public/images
i'm new in using hosting, i have a question about a FTP, why if i upload something (for example a image) to my server i cannot see it from the browser using the directory for example (http://www.mywebsite.com/public_html/images/backgrounds/background.png) if i use that address i get a fil with a "?" sign instead of the image. the only way to see the image is changing http by ftp for example,(ftp://ftp.mywebsite.com/public_html/images/backgrounds/background.png)
please how to find the files with http instead of ftp, to be able to use it in my web page using html
thank you
Typically, the publichtml folder is the root of your domain, which is to say that http://www.mywebsite.com/ points to your/relative/path/to/publichtml/
Using your example of putting a file at /publichtml/images/backgrounds/background.png would mean it should be accessible at http://www.mywebsite.com/images/backgrounds/background.png
Similarly, if you put filename.html in the /publichtml/ folder of your server, you should be able to access it at http://www.mywebsite.com/filename.html - If you put it in a subfolder of /publichtml/, say, at publichtml/example/, it should be accessible at http://www.mywebsite.com/example/filename.html
This can very from one server to another, but in most situations, this is common practice.
Edit: broken formatting.
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 have implemented image upload feature but I am facing issue with its path configuration.
I want to store the uploaded the images outside of webapp root directory because every time I un-deploy the application, it deletes the images within the application.
Now, I can store the the uploaded file by getting the path from property file [say C:\images] but when I use that path in it doesn't show the file in web page.
Can you please let me know how to get the absolute path in img src tag.
For security reasons, you can't reference files outside of the webapp root. You're going to need to use virtual directories. These will map outside paths into accessible URLs so c:\images will be accessible as myapp.com/myapp/images/
This sort of thing is specific to the application server you are running, so you'll need to check the documentation for your system to make this work.
I have a problem retrieving a flash file that is outside of the root directory.
What I have are 5 websites that use the same flash file, so I created a folder outside (one level up) of the 5 domains on my server. In the folder I have my flash file.
I am using the relative path below, but no worky worky.
"../resources/helpful_info.swf"
If I move the resource file and website files under a single domain it works fine. So, it seems I have a problem when I use a relative path and jump outside the domain to search for a file.
I don't want to use absolute path because files and paths change too much here.
Any ideas? I need it to worky worky
THANKS!
Your path does not make sense.
Relative paths are interpreted by the client, and they're used to compose a path within your domain.
You cannot use a relative path to tell the client to fetch a file outside the domain.
You also cannot reference outside your site at server side. Think security.
I see 2 fast solutions:
1) Create a new domain put the flash there. Other security problems like cross site scripting might occur.
2) Make a copy of the flash for all 5 domains. It is it update often create a script to copy it to every domain.