Question

我正在尝试在Blazor视图中显示图像，但它不起作用，仅显示图像图标：

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

我的图片在此路径wwwroot/Images/watch.jpg

中

Answer 1

尝试一下：

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

Answer 2

您可能会遇到以下错误：https://github.com/aspnet/Blazor/issues/1216，需要删除〜使其起作用，或者等待0.6发布。

Answer 3

我发现blazor'../Images'中的所有内容都是您所需要的。

如果您在Blazor中对图片/ css做任何事情，您可能会喜欢这个由Chanan命名的BlazorStyled项目：

https://github.com/chanan/BlazorStyled

我最近用它构建了一个名为Blazor Image Gallery的示例项目和教程，该示例项目和教程也使用了我的Nuget包DataJuggler.Blazor.FileUpload。

以下是称为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>

用户上传文件后，我的ImageUrl属性来自我的SQL Images表：

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

然后在用法中，迭代所选艺术家的图像列表，并在每个按钮上设置图像。

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

完整的源代码和视频：

示例项目： https://github.com/DataJuggler/BlazorImageGallery

视频 https://youtu.be/3xKXJQ4qThQ

Answer 4

在 wwwroot 下创建一个文件夹图像，然后像 src="images/MyLogo.png"

一样访问它

Answer 5

我的剃须刀上添加以下内容时会起作用：<base href="~/" />。它已经放置在_Host.cshtml中，但是您需要重复在组件页面上分别添加它。

Answer 6

阅读此书enter link description here，您将了解如何解决您的问题。基本上，您必须告诉框架使用根目录，因为默认情况下它是在错误的位置-http：/// images /搜索文件。

Answer 7

在Blazor中，您似乎不需要相对路径，甚至不需要wwwroot部分。如果您的图片位于wwwroot / images中，则将执行以下操作（其中class是用于设置图片高度的css）

img class =“ my_logo-img” src =“ / images / myLogoImage.png”

Answer 8

您需要使用点而不是猪的尾巴，所以就像这样：

假设您将images文件夹放置在与css文件夹相同的级别，否则必须插入正确的路由。

Answer 9

尝试一下 <img src="Images/watch.jpg" width="300px" /> 只需删除〜/即可。

如何在Blazor视图中显示图像

9 个答案: