16

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

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

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

4

9 回答 9

27

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

于 2018-09-02T10:40:43.620 回答
15

尝试这个：

 <img src="/Images/watch.jpg" asp-append-version="true" width="300px" />
于 2018-09-02T10:35:22.350 回答
6

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

于 2020-08-24T02:19:27.423 回答
5

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

于 2021-02-19T09:29:06.247 回答
3

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

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

于 2020-08-15T17:34:49.873 回答
2

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.

于 2019-10-19T06:25:44.017 回答
1

我发现 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

于 2020-02-26T15:48:24.080 回答
0

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

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

于 2020-08-23T20:16:09.550 回答
0

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

于 2020-02-26T12:08:37.850 回答