Static image in Blazor Component Library gives 404

Question

I have a Blazor Component library with components and stylesheets. Now I want to add an image file (static asset) to the library, and reference it from a server-side Blazor app (via NuGet).

I can already do this with the stylesheet, using a link tag in _Host.cshtml:

<link href="_content/BlazorNugetName/css/styles.css" rel="stylesheet" />

This includes the css asset in my consuming app.

If I use an image tag in my app like this:

<img src="/_content/BlazorNugetName/images/logo.png" />

or like this:

<img src="_content/BlazorNugetName/images/logo.png" />

It works when I reference the Blazor library directly. But with NuGet, I get a 404.

I probably need a link tag for this in _Host.cshtml as well. But what should it be? The docs only use scripts and stylesheets in their examples, not image files. I have looked at the documentation for the html link tag, but could not find any relevant syntax.

As an experiment, I tried:

<link href="_content/BlazorNugetName/images/logo.png" rel="prerender" />

but it made no difference.

Are you very sure it gets packed into the NuGet? Look into that maniifest. — Henk Holterman
It was actually working all along, but for some reason the NuGet package manager in VS did not show that an update was available for my package. After clearing the NuGet cache I was able to update and the image could load. — Rugbrød

Unknown Unknown · Accepted Answer · 2020-06-04T14:06:34

Try using a div instead is what I do.

Here I have a div: (here it is inline, usually I link to a CSS file or use BlazorStyled if I need dynamic CSS)

<style>
    .background
    {
        background-image: url('@BackgroundUrl');
        height: 64vh;
        width: 80%;
    }
</style>

public string BackgroundUrl { get; set; }

Then I set BackgroundUrl in the constructor:

BackgroundUrl = "_content/DataJuggler.Blazor.Components/Images/DarkBackground.png";

Here my project / Nuget package is called DataJuggler.Blazor.Components.

Something close to this should work.

<div class="background"></div>

Static image in Blazor Component Library gives 404

1 Answers