How to use pictures inside a Addon? - (project structure)

Questions General
1

Hej ember community, i have the following question: i want to use a picture (.png) inside a ember component (.hbs file). but idk where i should place it inside my ember structure (addon). there is no ressource folder inside my addon project or do i need to create one?

1 Like
2

Update: i created now a “assets” folder by myself under the addon folder. inside the assets folder i created a images folder. inside that folder i put all my images.

in my .hbs file i tried to use now

<img src="\addon\assets\images\activeclassinstances_info.jpg" alt="MDN">

and

<img src="addon\assets\images\activeclassinstances_info.jpg" alt="MDN">

but this dont work. i really need help. i only can find information to do this in normal ember projects but cant find any information about addons.

3

i still cant get it to work

Update: They tell me in the documentation here: Managing Dependencies - Addons and Dependencies - Ember Guides that i need to put my pictures inside a public folder. But there is no public folder in my addon structure. Here Addon structure - Writing addons - Ember CLI Guides they say nothing about a public folder, too.

i created now a public folder by myself and put my pictures like that: public/assets/images/activeclassinstances_info.jpg, but if i try to access it with

 <img src="assets/images/activeclassinstances_info.jpg" alt="MDN">

it dont work.

Please i need your help… it should be really not that difficult to use a picture inside a addon :confused: idk what i am doing wrong…

4

Okay, it finally works now !

My solutiuon: put your picture in the vendor folder like this. vendor\assets\images\activeclassinstances_info.jpg

then go to your index.js file and include the pictures like this:

    included() {
        this._super.included.apply(this, arguments);   
        this.import('vendor/assets/images/activeclassinstances_info.jpg');
    }

after that you can use your picture inside a .hbs file like that:

<img src="assets/images/activeclassinstances_info.jpg" alt="no picture">

idk if this is the right way to do it, but it works…

5

I’m a bit late here, but maybe this helps anyhow!

IMHO adding images into a /public directory in your addon is the way to go. The only tricky part is that the public folder will actually be available namespaces under your addons name.

So if your addon is called my-addon, and you have a file /public/my-dir/my-image.png, the file will actually be at /my-addon/my-dir/my-image.png.

2 Likes
7

@francesconovy explanation is on point. But adding more detailed explanation

Points to consider

  1. You dont get public folder generated by default in the add-ons, so you have to create the folder in the root, along side with app or addon
  2. You dont need any extra config. Just add images into the public/img/sample.png folder and refer them with /my-addon/img/sample.png or ./my-addon/.. . Both ways works.

P.S : had to delete my previous comment since it was not editable.

1 Like