How to show image in Razor component

Question

How to show image in Razor component

李畋岷 76

I write a Razor component in an asp.net core project as below:

@Aidan Wick {
//private ElementReference title;
}

The image "2271.jpg" can not be displayed no matter which render-mode is used. The picture "2271.jpg" is placed under the same folder as the razor file. How should this picture be displayed?

Khushwinder Singh 1 Reputation point

2022-12-02T08:38:11.587+00:00

I just have a simple question: how to set src of image using javascript in the razorView, the image file is in wwwroot and image.src = "path" is not working as javascript is not able to access the wwwroot folder

Accepted answer

1 additional answer

Your answer

Khushwinder Singh 1 Reputation point

2022-12-02T08:38:11.587+00:00

I just have a simple question: how to set src of image using javascript in the razorView, the image file is in wwwroot and image.src = "path" is not working as javascript is not able to access the wwwroot folder

Answer 1

Anonymous

Hi @李畋岷 ,

In Asp.net core application, by default the static files (such as HTML, CSS, images, and JavaScript) are stored within the project's web root directory. More detail information, see Static files in ASP.NET Core.

So, you could try to create an images folder in the wwwroot folder, and put the image into the images folder. Then, you can display the image like this:

<img src="images/Image1.png" />

The result is like this:

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

李畋岷 76 Reputation points

2022-02-08T03:13:33.563+00:00
OK, that's right, thanks.
One more question:
I receive a picture from WebSocket and turn it into Base64 string to display it like below:

<tr style="display:block"> <td style="vertical-align:top"><img src="@Base64Str" /></td> </tr>

It can't be displayed too. What should I do about this?

Best regards,
Li
Anonymous

2022-02-08T05:11:43.863+00:00
Hi @李畋岷 ,

You can refer the following code, in this sample, the FileContent is byte array type, and use the following code to display image:

<td><img src="data:image/jpeg;base64,@Convert.ToBase64String(Model.FileUpload.FileContent)" /></td>

The result is like this:

In your scenario, you can try to use the following code:

<td><img src="data:image/jpeg;base64,@Base64Str" /></td>

Best regards,
Dillion
李畋岷 76 Reputation points

2022-02-08T06:19:25.72+00:00
That's what my code is written. But it can't be displayed still.
Your code is MVC mode, right? Mine is Razor Page. I set Base64Str in WSocketClient_OnMessage event handler:

private async void WSocketClient_OnMessage(object sender, byte[] msg,int Len) { Base64Str = "data:image/jpeg;base64, "+ Encoding.UTF8.GetString(msg, 0, Len); await InvokeAsync(() => { StateHasChanged(); }); }

What's wrong with this code?
Anonymous

2022-02-08T07:26:46.877+00:00
Hi @李畋岷 ,

Your code is MVC mode, right? Mine is Razor Page.

No, in the comment sample, it is an Asp.net Razor page application. I just use the page model to bind the images.

You can change the following code:

Base64Str = "data:image/jpeg;base64, "+ Encoding.UTF8.GetString(msg, 0, Len);

to

Base64Str = "data:image/jpeg;base64, "+ Convert.ToBase64String(msg);

Refer to this screenshot (Razor page application):

If using Razor component, the screenshot as below:

Please check the msg to make sure it include the entire image data. And after page rendering, you could also use F12 developer tools to check the img element, whether the image's src attribute is correct.

Since this is another question, if the image still doesn't appear, I suggest you can create a new thread and then other community members can also help you with the problem.

Best regards,
Dillion
Matthew Patterson 0 Reputation points

2023-04-17T06:14:37.68+00:00

Thanks for this - did not appreciate that the images file had to be in the wwwroot folder. Had my images in another folder outside of this folder but thought if I had the right path referenced it would work (as it does for basic HTML page) but appears when you use Razor page then the image has to be in the wwwroot folder. Thanks again

Answer 2

李畋岷 76

OK. But excuse me to ask last question. What does the above mean?

Anonymous

2022-02-08T08:12:27.637+00:00

Hi @李畋岷 ,

So weird, the src attribute is gone. Based on the code you provided, it is difficult to determine the cause of the problem. I suggest you could create a new thread and it is better to create a simple sample to reproduce the problem.

Best regards,
Dillion

Share via

How to show image in Razor component

1 additional answer

Your answer