Where should I put images?

Me ajudou muito! Obrigada :slight_smile:

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

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

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

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?

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!

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

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

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

Put them in:

src/assets/images

and refer to them like:

assets/images/logo.png

Example:

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

This works both on browser and device. Thank you!

1 Like

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

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

thank you very much, it works like charm <3

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

Hello,

I am having the strange issue, the images are loaded first time when app is bootstrapped but when i change the route the images are broken. This happens in ionic 2

src="./assets/img/category.png" class=“section-title-img”

By using ./assets/... you are relative to the page loaded. Doesn’t it work to use assets/...?

Thank you for repose.

I have tried that as well.

@Sujan12

Got the solution.

src="/android_asset/www/assets/img/category.png"

This worked for me.

Thank you for your help.

3 Likes

This is the answer that worked for me. I guess it comes down to the fact that the compiled SCSS and html are in different places. Webstorm yells about me about the paths, but everything loads in the Browser and On-Device just fine.

finally! this and only this, worked for me