3

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?

cheshire
  • 1,109
  • 3
  • 15
  • 37
  • Possible to recreate this via a stackblitz? Also how are you doing this: *but when I open a page that displays that image*? – Nicholas K Mar 28 '20 at 17:08
  • @NicholasK I will try now. "but when I open a page that displays that image" I meant when I navigate to the component.html page on my app where that image should show up – cheshire Mar 28 '20 at 17:12
  • @NicholasK I can't recreate it via stackblitz. It seems like my angular project doesn't see changes in folder for some reason – cheshire Mar 28 '20 at 17:22
  • Can you share how you are loading this image again? – Nicholas K Mar 28 '20 at 17:42
  • @NicholasK I updated the question with additional error log – cheshire Mar 28 '20 at 17:50
  • It fails coz its looking for that path as a route, which obviously doesn't exist. You need to load that file from the `/assets/...` folder when the corresponding route is navigated to, preferably from the `ngOnInit()`. – Nicholas K Mar 28 '20 at 17:59
  • @cheshire exactly to which path are you saving the image on submit? – alexortizl Mar 28 '20 at 20:44
  • @alexortizl that was initially the path now its just name of the image file. But that is actually not the problem since the image is loaded correctly after reloading the app. The problem is that the app doesn't see the image until I trigger live reloading or simply restart the app. – cheshire Mar 28 '20 at 20:58
  • In this answer https://stackoverflow.com/a/58777803/4552354 Athanasios Kataras says that, **"The assets are meant to be static updated at build time (ng build or ng serve)."** Most likely that's your issue if you say that the files are loaded after a restart. – Kari F. Mar 29 '20 at 05:19
  • @KariF. yeah you are completely right, that was the problem from beginning. At the end I just served the images through my backend. – cheshire Mar 29 '20 at 15:50
  • You should answer your own question. It has already 3 up votes and that way you can help other people, too. I think it's quite a common issue. – Kari F. Mar 29 '20 at 17:22
  • @KariF. of course – cheshire Mar 30 '20 at 20:16

3 Answers3

3

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.

cheshire
  • 1,109
  • 3
  • 15
  • 37
1

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.

alexortizl
  • 2,125
  • 1
  • 12
  • 27
  • I actually do not have a `dist` folder in my root and images are only inside of my assets folder. The server doesn't move assets folder anywhere in my project, except if it doesn't happen somewhere in the background and I cant't reference those files. I tried making a `dist` folder but that doesn't change anything. Still the same thing with reloading. – cheshire Mar 28 '20 at 21:47
0

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.

PushpikaWan
  • 2,437
  • 3
  • 14
  • 23
  • This didn't work. What is different is that now when I reload the page from browser nothing happens until I reload the app from my IDE with `--liveReload=true`. Image is then correctly displayed. Do you maybe know why this happens? Should I somehow reload the app with code when clicking on submit button? – cheshire Mar 28 '20 at 19:09
  • @cheshire isn't your configuration default set live reload true ? – PushpikaWan Mar 29 '20 at 05:54