CODEWITHSUNDEEP
htmlangularimagesrc
Opat
Opat

Reputation: 133

How to embed images in Angular which lie in another directory than assets?

I have an Angular Application with the following structure: Structure

As you can see, there is a backend directory (yellow marked) in which other directories exist, such that the following path is valid: backend/uploads/users/user123/unnamed.jpg.

Now I want to use that image in my app.component.html

<img src="">

I tried to put the path in the src-property in different ways but the image is not appearing. How would the src has to look like to use that image in my Angular project?

Upvotes: 0

Views: 529

Answers (2)

user14339457
user14339457

Reputation:

I guess you are using the angular CLI. Therefore you should put the image in the assets folder. Try again than and it will work.

Like this:

<img src="/assets/images/unnamed.jpg">

EDIT: I am sorry, did miss out that part. You need to edit the angular.json file for this. Add the path of the backup folder there to the assets. But the backup folder must be in the src folder for this to work. Thats my suggestion for a solution. So you will be adding "src/backup"

Upvotes: 1

Elmehdi
Elmehdi

Reputation: 1430

I don't think what you want to do is actually feasible. if you want to use an image in an Angular app, it's either an asset and you put it in the assets folder, or it's a resource coming from your backend and you will have to write a proper mechanism to expose the wanted resource, and then use it in your Angular app.

Upvotes: 0

Related Questions