CODEWITHSUNDEEP
blazorblazor-server-side
Rye bread
Rye bread

Reputation: 1801

Static image in Blazor Component Library gives 404

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.

Upvotes: 1

Views: 1188

Answers (1)

user12228709
user12228709

Reputation:

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>

Upvotes: 1

Related Questions