如何在 Blazor 视图中显示图像答案

【问题标题】：How to show image in Blazor view如何在 Blazor 视图中显示图像
【发布时间】：2019-02-07 16:43:09
【问题描述】：

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

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

我的图像位于此路径wwwroot/Images/watch.jpg

【问题讨论】：

我投票结束这个问题，因为它已经 1 岁以上并且没有被标记为正确答案。

标签： blazor

【解决方案1】：

您可能遇到了这个错误：https://github.com/aspnet/Blazor/issues/1216，需要删除 ~ 以使其工作，或等待 0.6 版本。

【讨论】：

这对我有用，但在我看来，这个解决方案强调的是非常有趣和酷的。基本上，它突出了 blazor 开发的全部目的，感觉更像 C# 而不像 Web，让您能够通过简单的文件夹目录导航来引用项目中的项目，而无需考虑用户的浏览器需要如何访问资源.很酷。 #nativeDev
还是要去掉猪尾巴才能工作。

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

试试这个 <img src="Images/watch.jpg" width="300px" /> 只需删除 ~/ 即可。

【讨论】：

这个答案早就给出了：stackoverflow.com/a/52136195/1879699
工作，因为它位于已注册的 wwwroot 文件夹中

【解决方案4】：

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

一样访问它

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

在你的剃须刀上添加这个时我的工作：<base href="~/" />。这已被放置到 _Host.cshtml，但您需要在组件页面上重复单独添加它。

【讨论】：

【解决方案7】：

我发现 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 图像表：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

你需要用点代替猪尾，所以应该是这样的：

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

【讨论】：