assets images are not loading in ionic 3 in development mode Ionic Serve

Question

I am using IONIC 3.20.1 and I am facing the issue, assets images are not rendering on the browser or device as well.

The folder structure is the same while creating the sample project inside the src folder then assets then imgs.

but images are not loading on the browser after the ionic serve. I tried all the paths like below.

<img float-right src="../assets/imgs/user.png" /> 
<img float-right src="../../assets/imgs/user.png" /> 
<img float-right src="/assets/imgs/user.png" /> 
<img float-right src="./assets/imgs/user.png" /> 
<img float-right src="assets/imgs/user.png" />

but nothing is working. Please help me out here.

Please check the link also.

The path is correct, but not rendering on the browser. I double check the assets folder is available inside src with imgs folder and images inside. — Umesh Sehta, May 22 '19 at 11:37
try two things : 1) rename your .png file 2) use different image — AbdulAzeem, May 22 '19 at 11:47
Using Ionic Serve it is not working in any case. I have added Cordova Tools inside the visual studio code and Cordova browser platform, then it is working now. — Umesh Sehta, May 22 '19 at 13:02

score 0 · Answer 1 · answered May 22 '19 at 13:09

I tried all the things like renaming name of the images, folder name change. but didn't work in case of "Ionic Serve".

After that, I Installed the Cordova Tools extension for Visual Studio Code.
Added the configuration file. (launch.json)
And then added browser platform using the command 'ionic cordova platform add browser'
At last, debug the application with "RunBrowser" option
Now the images are rendered properly
Scrrenshot http://prntscr.com/nrw5fr

assets images are not loading in ionic 3 in development mode Ionic Serve

1 Answers1