How to specify path from root to assets Angular?

Question

In root of project src there is directory assets where are placed images.

In user service I read these images like:

return (data.photo == undefined || data.photo == null) ? '../../../assets/img/blank-person.jpg' :

You can see related path, that is bad approach. How to specify absolute path to assets?

score 6 · Accepted Answer · answered Jun 07 '18 at 12:46

@OPV you don't need to provide complete path, as we know Angular ultimately build the project even we perform ng serve. So, folder structure becomes like below image :

here you can see asset folder is parallel to index.html file which ultimately using your image. Hence you need to provide path considering above structure.

for my test.jpg file

path will be : './assets/img/test.jpg'

For example : <div style="background-image: url('./assets/img/test.jpg')" ></div>

Here ./ indicates current folder, as above structure shows that index file is in current folder of asset folder we have to start path from current folder.

Hope it will resolve your query, if you find any problem please let me know I will be happy to help.

score 2 · Answer 2 · answered Jun 07 '18 at 12:26

2

To get assets folder from any components inside the src folder,

You have to modified your code like:

return (data.photo == undefined || data.photo == null) ? './assets/img/blank-person.jpg' :

answered Jun 07 '18 at 12:26

Trusha

611
5
12

What about: `return (!data.hasOwnProperty('photo') || data.photo == null)`? – POV Jun 07 '18 at 12:26
In else statement you can return any default image. – Trusha Jun 07 '18 at 12:31

How to specify path from root to assets Angular?

2 Answers2