How to display images saved in wwwroot (asp.net core ) in Angular project

user_4224056 0
Viewed 7242

I am working at one of my personal project based in ASP.NET CORE and Angular. I can specify that for this project I have two separates projects.

First project is just Server side in Microsoft Visual Studio ( back end code, Controllers and link with database ) and second project is Client side in Visual Studio Code ( Angular, typescript code ).

So two projects under one big project which need to be an online shop where I have products and some images for every product.

Which is my issue ?

I can not get the Images already saved in "wwwroot" folder ( in back end - in first project - in Visual Studio ) and display them in Client side ( in Angular - in front end ). I can specify that I have stored images in "wwwroot" folder ( Image Name and the image itself ) and the Image Name and Image Path are saved in the database. Can you tell me which is the best approach to do get the images from back end and display them in front end ? Can you give me some hint about how to to this ? Give me your approach and how to implement this ?

What is implemented ?

In this online shop is implemented inserting of new product ( with Name, Description and also with Image itself ) which is send from front end to back end and stored inside "wwwroot" folder ( Image itself ) and save the Image Name and Image Path inside database.

If is needed I can add some code for better understanding but I need just an approach or an ideea of how to do this. Thank you in advance.

angular asp.net-core frontend backend
4 Answers

The content in the wwwroot should be publicly accessible relative to the base URL of your app. As the documentation explains:

Static files are accessible via a path relative to the web root. For example, the Web Application project templates contain several folders within the wwwroot folder:

  • wwwroot
    • css
    • js
    • lib

Consider creating the wwwroot/images folder and adding the wwwroot/images/MyImage.jpg file. The URI format to access a file in the images folder is https:///images/<image_file_name>. For example, https://localhost:5001/images/MyImage.jpg

So from your Angular app, just use the URLs as expected, like https://localhost:5001/images/MyImage.jpg corresponding to wwwroot/images/MyImage.jpg.

user_24117130

In addition to the accepted answer you need to configure your ApplicationBuilder (Configure Methode in Startup.cs):

app.UseStaticFiles();

Without this your wwwroot folder will not get served. You can also configure UseStaticFiles() with 'StaticFileOptions' to serve a diffrent folder than wwwroot.

user_90662780

An angular .html

<img [src]="img"/>

Need that

img="myimage.jpg"        //if wwwroot/myimage.jpg
img="images/myimage.jpg" //if wwwroot/images/myimage.jpg

See that there are not a slash at first.

user_85581860

I had the same issue and I tried 20 different things until I finally found a solution. Here is what you need to do:

  1. Create an images folder inside the wwwroot folder, if you have not already done so.
  2. Put the image file into the newly created images folder.
  3. In the img tag, enter the file path to the image in the following example format:
<img src="~/images/mcd-logo.jpg" title="McDonald's Logo" alt="McDonald's Logo" />

The big differences for me was putting the images folder in the wwwroot folder and then adding the ~ to the path.

user_61144860
Related