【问题标题】: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】:

    试试这个 &lt;img src="Images/watch.jpg" width="300px" /&gt; 只需删除 ~/ 即可。

    【讨论】:

    【解决方案4】:

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

    一样访问它

    【讨论】:

      【解决方案5】:

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

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

      【讨论】:

        【解决方案6】:

        在你的剃须刀上添加这个时我的工作:&lt;base href="~/" /&gt;。这已被放置到 _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 文件夹放在同一级别,否则您必须插入正确的路由。

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 2015-10-21
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2018-11-16
                • 2017-09-13
                相关资源
                最近更新 更多