Show image on physical phone

Ionic Framework ionic-v3
1

Hello

in an ionic project, how to make the images appear on the phone.

I put my images in an img folder present in www. when i do ionic serve or ionic lab, my images show up well but when i do ionic cordova build android, no picture is displayed.
how to arrange that please?

2

put your images in src/assets/img/ and load them with relative paths like assets/img/img.png works for me.

3

for me, it works when I use the img tag.
but when I try to put the same image as the background of a div by doing eg background: url (’./ assets / img / myImage.jpg’), the image is displayed in the browser but when i install the application on my phone, the image is no longer displayed.

4

try instead
url (’assets/img/myImage.jpg’)
without the ./ in the front

5

Hello,
like @user5555 adviced everything in src is copied at build prozess to the www folder.
Maybe from foo.scss works url(’…/assets/…
Maybe from foo.ts works url('assets/…

Best reagrds, anna-liebt

6

it still does not work @user5555

7

Anna I can not understand the last 2 lines of your comment.
I am French speaking, I use a translation software to translate your messages

can you explain again?

8

Hello,
foo is a placeholder of your filename.

So yourfilename.scss, from where your css will created, need as far as I know (because I am a bloody beginner on web things) a path, for example for background

.myclass{
    background-image: url('../assets/backgrounds/hotthings.png');
  }

and is in html used as

<ion-content class='myclass'></ion-content>

If you will set background in yourfilename.html you set for example

<ion-content style='background-image: url(assets/backgrounds/hotthings.png'>

If you set it to a image it looks like

<img src='assets/backgrounds/hotthings.png'>

So depending where you set it und to what you set it, it will look a little bit different.

I often set things from yourfilename.ts and here I use the path like in .html will needed.

Sorry for my bad english, but my french is much more worser, okay a few not acceptable words and sentence I can speak understandable.

Best regards, anna-liebt

9

ok thank you @anna_liebt

10

I would strongly recommend learning english. It’s very useful in programming. By the way english isn’t my native language either - im german.

11

I already do it

thank you for the recommendation

1 Like