SOLVED: How to display an img on ionic2 project

Ionic Framework ionic-v3
1

i didn’t succed to display an image. Someone get the answer?

ionic start myApp sidemenu
ionic platform add android@4.1.1 //API level 22
ionic run android

I add in www/index.html for not having the withelist error in android.:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

i create a file img in myApp/app/ (as the same level than css, pages, theme folder)

i put inside the img file my picture profil.png

in app/pages/getting-started.html

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Getting Started</ion-title>
</ion-navbar>

<ion-content padding class="getting-started">
  <h3>Getting Started</h3>
  <p>
     Get it started!
  </p>
  <img src="img/profil.png"  />
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>
</ion-content>

i tried without succes :
<img src="../Images/profil.png" />
<img src="./Images/profil.png" />
<img src="Images/profil.png" />
<img src="../img/profil.png" />
<img src="./img/profil.png" />
<img src="img/profil.png" />
<img src="profil.png" />

I also copy by hand the file img in www/build

without success:
with chrome://inspect/#devices

Failed to load resource: net::ERR_FILE_NOT_FOUND
profil.png:1 GET file:///android_asset/www/img/profil.png net::ERR_FILE_NOT_FOUND
2

Put the img folder inside www folder.

3

i did it but when i execute my app the folder desappear !!! what should i do cuz i didn’t understood what hapened

4

Update your ionic CLI, that should fix the problem.

5

in gulpfile.js adding ‘images’:

gulp.task('watch', ['clean'], function(done){ runSequence( ['sass', 'html', 'fonts', 'scripts', 'images'],

and adding gulp task itself to the end of file

gulp.task('images', function(){ return gulp.src('app/img/**/*.+(jpg|png|svg)') .pipe(gulp.dest('www/build/img')); });

now files from app/img wil be stored in build/img

3 Likes
6

HI…i added this line it works…

Before:
img src="…/loginPage/src/assets/images/waiting.png"

After:
img src="…/assets/images/waiting.png"

it works for me…

7

for me
<img src="assets/images/waiting.png" />
works

6 Likes
8

Gracias , funciono para mi caso mi error era que yo estaba llamando y no funcionaba

9

I started a new Ionic 3 project, and the following works for me:

Put your images in the following folder:
src/assets/imgs/

Reference your image on the page as follows:
<img src="assets/imgs/yourimage.png">

I have verified this as working natively on iOS and Android devices, as well as locally in a browser (via ionic serve). Any other variation on location of image or path in the page yielded an issue for me on one or more of those target environments