Assets (images) not loading in webapp

Ionic Framework Ionic Angular
1

I put down a project more than year ago that was working. It is Ionic with Angular.
I thought I did all the commands needed to get everything lined up to run in a browser

git clone https://github.com/
npm install
ionic build
ionic serve

The app comes up, all looks good (including other asset files), but many yet not all images are missing.

Details of images are as follows:
They start in a src directory
\src\assets\Images_G*.jpg

Looking in
\www\assets\Image_G*.jpg

I see ALL of the images.

In the webapp running in the browser, I see only about one in ten of the images.
Consistent with the missing images the developer debug console for each of the missing files says:

blahblahblah.jpg:1

       Failed to load resource: the server responded with a status of 404 (Not Found)

The paths to the missing ones seem the same as the ones displayed (each with different *.jpg file name of course).

How did it get some random ones but not others? The first few that show up are the 12th one, the 18th, 23rd, 24th, 27th. There seems to not be any pattern to those which do appear which I can see.
All files are small (<500 KB) jpg files.

Did I miss a configure, clean, redeploy or build step?
Suggestions?

TIA

2

Can you share some code on how you are using the images? For example, what does your img tag look like.

1 Like
3

Thanks for helping.

The following example are taken from the resulting html in the developer console of the browser.

This one shows a small image in a circle
<img _ngcontent-omq-c276="" class="SVG" src="assets/Images_G/Agaricus_comtulus_0_Ben_Woo.jpg">

while this shows nothing
<img _ngcontent-omq-c276="" class="SVG" src="assets/Images_G/Agaricus_deardorffensis_0_Christian_Schwarz.jpg">

This 2nd one generates the image not found error in the console.

Another use of the same image is the following:
This shows an image

<img _ngcontent-omq-c273="" alt="Image not found..." src="assets/Images_G/Agaricus_comtulus_0_Ben_Woo.jpg" ng-reflect-ng-style="[object Object]">

This generates “Image not found” on the page.

<img _ngcontent-omq-c273="" alt="Image not found..." src="assets/Images_G/Agaricus_deardorffensis_0_Christian_Schwarz.jpg" ng-reflect-ng-style="[object Object]">

4

I am going to guess you are having issues because you don’t have a slash at the beginning of your src path telling the browser to look at the root of the domain for the folder assets.

<img _ngcontent-omq-c276="" class="SVG" src="/assets/Images_G/Agaricus_comtulus_0_Ben_Woo.jpg">
5

Neither the ones that do show nor the ones which do NOT show have a slash, so why would that make a difference?

Hovering over an example in the developer elements panel and “copy link address” I get
http://localhost:8100/assets/Images_G/Agaricus_comtulus_0_Ben_Woo.jpg
and it displays if pasted in the address bar.

Trying the same thing on one not displaying I get the same form
http://localhost:8100/assets/Images_G/Agaricus_deardorffensis_0_Christian_Schwarz.jpg

As expected since it didn’t display in either places used in the app, it doesn’t display if the URL is pasted directly in the address bar.

What could be going on?

6

Having a leading / tells the browser to load from the root of your domain vs. a relative path from the current location. I would say it is good practice to use a leading / especially in this scenario with assets.

I have no idea what the problem could be. If some load and others don’t, that is super odd.