How to show image in Blazor view

Question

I am trying show images in a Blazor view, but it's not working and shows only an image icon:

<img src="~/Images/watch.jpg" asp-append-version="true" width="300px" />

Here my image resides in this path wwwroot/Images/watch.jpg

Answer 1

You are probably running into this bug: https://github.com/aspnet/Blazor/issues/1216 and need to remove the ~ to make it work, or wait for the 0.6 release.

Answer 2

Try this:

 <img src="/Images/watch.jpg" asp-append-version="true" width="300px" />

Answer 3

Try this <img src="Images/watch.jpg" width="300px" /> Just remove ~/ and it works.

Answer 4

Create a folder images under wwwroot then access it like src="images/MyLogo.png"

Answer 5

In Blazor, it appears that you don't require a relative path or even the wwwroot part. If your image is in wwwroot/images something like the following will work, (where class is a css that sets your image height)

img class="my_logo-img" src="/images/myLogoImage.png"

Answer 6

Mine works when adding this: <base href="~/" /> on your razor. This is already been placed to _Host.cshtml but you need to repeat adding it individually on your component pages.

Answer 7

I have found for everything in blazor '../Images' is what you need.

If you do anything with images / css in Blazor, you might like this project called BlazorStyled by Chanan:

https://github.com/chanan/BlazorStyled

I recently built a sample project and tutorial with it called Blazor Image Gallery, that also uses my Nuget package DataJuggler.Blazor.FileUpload.

Here is one of the components called an ImageButton:

@using BlazorStyled

<Styled @bind-Classname="@ImageStyle">
    background-image: url('@ImageUrl'); 
    width: @WidthPixels;
    height: @HeightPixels;
    transform: scale(@Scale);
    transform-origin: left;   
    border: 2px solid black;
    z-index: @ZIndex;
    outline: none;
    position: absolute;
    left: @ColumnLeftPixels;
    top: @RowTopPixels;
    display: inline-block;
</Styled>

<button class="@ImageStyle" @onclick="Button_Clicked"></button>

My ImageUrl property comes from my SQL Images table after a user uploads a file:

ImageUrl = '../Images/Gallery/Christina/Image1.08b2bb51-5.png'

Then in the usage I iterate my list of images for the selected artist and set the image on each button.

<div class="galleryimages">
    @if (SelectedArtist.HasImages)
    { 
        @foreach (Image image in SelectedArtist.Images)
        {  
           <ImageButton Image=image Parent=this></ImageButton>
        }
    }
</div>

Full source code and video:

Sample Project: https://github.com/DataJuggler/BlazorImageGallery

Video https://youtu.be/3xKXJQ4qThQ

Answer 8

Read thisenter link description here and you'll understand how to solve your problem. Basically, you have to tell the framework to use the root directory, because by default it is searching for the file in the wrong place - http:///images/.

Answer 9

You need to use dots instead of the pig tail, so it would be like this:

assuming that you put your images folder at the same level that the css folder is, otherwise you will have to insert the right route.