CODEWITHSUNDEEP
angular
cheshire
cheshire

Reputation: 1159

Image not showing right away in angular

This is in my component.html:

<div class="image-container">
    {{cat.picture_path}}
    <img src="assets/{{cat.picture_path}}">
</div>

I have put {{cat.picture_path}} just so I know that picture_path is correct and img tag which points to that image.

Now I am saving that image though form to my backend where it is saved to my assets folder.

When I click submit the picture is saved to correct location but when I open a page that displays that image I get:

image39.png:1 GET 
http://localhost:4200/assets/image39.png 404 (Not 
Found)
Image (async)...

The image is present in that folder and the path is correct.

What confuses me is that this warning goes away after 10 or so minutes and picture is displayed without a warning.

I tried reopening angular project after adding photo but that doesn't change anything. The picture will only appear after an amount of time.

Do I have to somehow reset the path or refresh directory so that angular can look for image?

What is going on here?

update 1:

Even If I go to If http://localhost:4200/assets/image39.png I get:

core.js:5873 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'assets/image39.png'
Error: Cannot match any routes. URL Segment: 'assets/image39.png'

even though image is in the folder. If I try with other image it works as expected.

update 2:

Reopening angular project with ng serve solves this problem but still do not understand why

update 3:

After changing "outDir": "./dist", in my tsconfig.json file and chanign my img tag to img src="/assets/images/{{cat.picture_path}}" it now displays the image shortly after I reload the app with my IDE with --liveReload=true enabled. Refreshing the page from browser doesn't do anything. Is there a way to reload this component right away when image is uploaded?

Upvotes: 3

Views: 15188

Answers (3)

cheshire
cheshire

Reputation: 1159

The problem was that I was saving the images in assets folder which is used for static content that is basically part of the software. That is why I had to rebuild the app every time image was added there. Do not use assets for dynamic content.

For this purpose I used my backend and set up a REST point where I served the image by request. Now every time I load that page, I am requesting that image to be served by backend, I get the url and put it in my img tag.

Upvotes: 3

alexortizl
alexortizl

Reputation: 2680

I think problem here is related to the path where you're uploading your images. By default you have an assets folder and a dist folder on your project root. When you build your project, Angular copies the assets folder inside dist folder and the server serves the content to the browser from the dist folder. So when you type in the browser http://localhost:4200/assets/image39.png you're referencing dist/assets/image39.png. So what I'm think is going on here is that you're uploading the images to the root assets folder but the server is looking into dist/assets which doesn't have the image. When you run ng serve with --liveReload=true Angular automatically copies assets to dist/assets on every file change that's why it works, but in production you don't have that. Make sure that your backend puts the images inside dist/assets and it should work fine.

Upvotes: 1

PushpikaWan
PushpikaWan

Reputation: 2525

try 

<img src="assets/images/image39.png">

I think this https://github.com/angular/angular-cli/issues/9852 question also related to ur problem. If u want any other way u can try out the solutions there.

Other than that check your tsconfig.json file as will. If it has Change this: "outDir": "./dist/out-tsc", It should change to 

"outDir": "./dist",

this as well.

Upvotes: 0

Related Questions