I write a Razor component in an asp.net core project as below: <div> <table class="layui-table"> <tbody id="PTb" style="display: block;height: 600px;width:1000px;overflow: auto"> <tr style="display:block"> <td style="vertical-align:top"><img src="2271.jpg" /></td> </tr> </tbody> </table> </div> @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?

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

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

How to show image in Razor component

Accepted answer

Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

2022-02-08T01:44:01.983+00:00
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
Please sign in to rate this answer.

1 person found this answer helpful.
李畋岷 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

Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

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?

Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

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
Sign in to comment

How to show image in Razor component

1 additional answer