Where should I put images?

Ionic Framework ionic-v3
21

This worked from ionic2 - Where do Images go in IONIC 2 - Stack Overflow

Create a images folder in “www” directory (www/images/) and add your all images in this path.

Then give your image path like this ex: for pages src=“images/logo.png”

But it contradicts the advice here and on that same stackoverflow thread about using the assets directory.

22

I would rather use assets too, actually I do.

I always see www as a goal of the build. So basically I always think that when I start a build that directory could be fully cleaned to be sure that all the last changes were included.

Furthermore, I don’t add the www folder to git.

Note: Right now, the build doesn’t copy anymore automatically what’s in assets (see https://github.com/driftyco/ionic-app-scripts/issues/176) to www/assets. So when I had something new I also mirror it manually to www/assets. But as soon as this gonna be fixed, everything gonna be fine. **

shorten

  • My files are in: src/assets/img

  • When building (or to deploy them manually), goal folder: www/assets/img

  • How to use them in code: < img src=“assets/img/my_img.svg”/ >

Tested on physical android phone and iphone

** Update: Seems that issue with app-script 0.0.36 gonna be fixed in 0.0.37

2 Likes
23

I load my background image like this

background-image:url(/assets/img/flags.png);

and it works inside a browser, but when I run project on Android phone, then I get this error:

file:///assets/img/flags.png Failed to load resource: net::ERR_FILE_NOT_FOUND

Why is this happening?

System info

Cordova CLI: 6.4.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.39
OS: Distributor ID:     Ubuntu Description:     Ubuntu 16.04.1 LTS
Node Version: v6.9.1
24

Try ‘./assets/img/flags.png’ maybe

25

@reedrichards That didnt work. Turns out this is the solution

background-image:url('../assets/img/flags.png');

2 Likes
26

Hi
If you are using ionic 2 with typescript, create folder named images in assets as you see in the picture bellow :
image

in html use this code :
<img src="./assets/images/pic.png"/>

this functions for me :slight_smile:

6 Likes
27

Me ajudou muito! Obrigada :slight_smile:

28

create img folder on assets and link your html src.
example:

  <img src="assets/img/jeff.jpg">
1 Like
29

Just adding my 2c, The post above is the proper way to write the src.

*** DO NOT USE ***
src="/assets/img/jeff.img"

Since this will work fine on desktop browsers but fails on android devices/emulators. (Haven’t tried ios yet). This little snag cost me almost 2 days barking up the wrong tree (is it caused by browser incompatibilities? is it caused by CSP? etc).

1 Like
30

This is different but related…
I am not trying to reference an image but rather a file that is storing some predefined data that my app needs.
I am also using the assets folder, like this
/src/assets/data/datafile.ts

In one of my services I am referencing the data file like this
import { DATA } from ‘…/…/assets/data/datafile’;

Now everything works fine when I use ionic serve or ionic emulate with liveReload.
BUT if I use it without liveReload my app loads up with a white screen and using chrome inspector I find that the error is
main.js:6Uncaught Error: Cannot find module “…/…/assets/data/datafile”

Can someone explain this one?? Seems like when using the /src/assets folder there is a difference between using liveReload or not.
I assume the same will happen for images?

31

In reference to @truesaint’s quote, it’s not that src equals assets. it’s the src/assets subdir.

In reference to @gotters, the path to link to in an html file is src="…/assets/images/xyz.jpg" You jump up 1 level, not 2.

I hope that helps everyone!

32

I was actually referencing the data file from a component class (ie not from the html) and nothing seemed to work (ie not even jumping 1 level up @ryanlogsdon

I decided that for files being referenced from within the component class its better to move those out of the assets folder and into the app folders like all other classes.
It seems the assets folder should only be used when referencing items from the template itself (like images).

Thanks

33

It works for me in Ionic V2 just when I do the following:
Add the “image.png” in both the following folders:

  1. www/assets/img/
    2)src/assests/img/

then in your html code you do the following:

<img src="assets/img/image.png">

I hope this helps

34

I am using ionic 2, 2.3.0

I copied image file into src\assets,
in browser both of these works fine
background-image: url(’…/…/assets/background.png’);
background-image: url(’/assets/background.png’);

on Android device, none of them working

2 Likes
37

Put them in:

src/assets/images

and refer to them like:

assets/images/logo.png

Example:

<img class="logo" src="assets/images/logo.png" />

39

This works both on browser and device. Thank you!

1 Like
40

I had to do:

background-image: url('../assets/img/my-img.png')

with src directory:

|-- src
    |-- assets 
        | -- img
             |-- my.img.png

and if I look in www:

|-- www
   |-- build
   |-- assets
       |-- img
           |-- my-img.png
41

Have you tested that CSS in a device?
Because most people had to put an absolute path to make it work.

42

thank you very much, it works like charm <3

43

These did the trick for me:

In SCSS, it’s ‘…/assets/images/my_image.png’
for example:

background: url(‘…/assets/images/my_image.png’);

In HTML, it’s ‘./assets/images/my_image.png’

Hope it helps :slight_smile:

1 Like