• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 1251
  • Last Modified:

Angular 5 - Storing images inside the component folder

I know that the normal thing to do due to angular having the assets folder as the storage place is to store images inside the asset's folder in the project root.

I am thinking creating re-usable components and for portability issues I would like to have everything which belongs to a specific component inside it's own folder.

For example if I great an assets folder inside the component's folder and then try to reach an image from my mycomponent.component.html

<img src="./assets/myimage.jpg" alt="" />

Open in new window

If I do the above the image with not appear.

Does anyone know a workaround for this?
1 Solution
Julian HansenCommented:
If you are using webpack you can use require(path/to/image) assign that to a component variable and then do
<img [src]="nameofvariable">

Open in new window

However this is not really the right way of doing it and (as of writing) won't work with a CLI buid.
There is some debate around this issue here
and here
But no real resolution - the gist being to change behaviour on the <img> would break existing applications.

There is merit in having the images with the component - but maybe a compromise for now is to have a component folder in the assets folder.

One could argue that to move a component would require moving its component file + its corresponding asset folder. Not as tightly coupled as you would like but with a proper convention in place moving components remains a simple task.
error2013Author Commented:
Sorry, typo...now appear....was mean't to be: not appear.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now