CODEWITHSUNDEEP
blazor-webassemblyrazor-component-library
Maurice Klimek
Maurice Klimek

Reputation: 1092

Unable to render image when kept in blazor component in separate DLL

I'm trying to create a Blazor component that I keep in a separate DLL.

Easy stuff: just a div with an image.

The image is being kept in the formentioned separate DLL, in a folder structure that looks something like wwwroot\ComponentName\logo.png.

Then in the ComponentName.razor.css file I try to call it:

.logo {
    background-image: url('../wwwroot/ComponentName/logo.png');
    width: 200px;
    height: 200px;
}

My problem is... it doesn't render when I use in the Blazor WASM website.

I believe I'm doing one thing wrong.

  1. Either I'm using the wrong URL.

  2. Or the image file has wrongly configured properties. And I'm not entirely sure what to pick here. I already tried with Build Action Content and Copy Always as I have with Resource. Not really sure, how the image should be treated.

Please advise.

Comment to the accepted answer

Although Neil's answer which can be found here was on point it wasn't enough.

First of all: both build actions appear to be working: Content and Embedded Resource alike. So it was not the case.

What I noticed is that when I actually put the image as an image:

<img src="./_content/ComponentLibraryName/ComponentName/logo.png" />

It actually works. What is different?

What Neil pointed out: _content folder, not wwwroot. What I consider unclear in the linked documentation was the correct folder structure, and that means I had to first provide the Component Library Name, then repeat the folder structure, then provide the file name.

So I went back to the CSS version, just to check if it still works.

.logo {
    background-image: url("./_content/ComponentLibraryName/ComponentName/logo.png");
    width: 147px;
    height: 80px;
}

Did not work. When debugging it from DevTools level I noticed that the CSS link to the image file actually pointed to https://localhost:7210/_content/ComponentLibraryName/_content/ComponentLibraryName/ComponentName/logo.png. When I removed the doubling string...

.logo {
    background-image: url("./ComponentName/logo.png");
    width: 147px;
    height: 80px;
}

It actually worked.

I did not want to write this explanation as an answer to accept it, mostly because the only thing that changed was what was in Neil's answer anyway. I do not clearly understand anything more than this.

Upvotes: 1

Views: 413

Answers (1)

Neil W
Neil W

Reputation: 9112

I think you'll need to use "_content".

Specifically, if your image is in the wwwroot folder of a dll (razor class library) called MyComponent, then I believe you'll need to reference such static files using:

background-image: url("./_content/MyComponent/logo.png");

See MS Doc

Upvotes: 2

Related Questions