当保存在单独DLL中的blazor组件中时,无法渲染图像



我正在尝试创建一个Blazor组件,并将其保存在一个单独的DLL中。

简单的东西:只是一个带有图像的div。

图像被保存在前面提到的单独的DLL中,在一个看起来像wwwrootComponentNamelogo.png的文件夹结构中。

然后在ComponentName.razor.css文件中,我尝试将其称为:

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

我的问题是…当我在Blazor WASM网站中使用时,它不会渲染

我相信我做错了一件事。

  1. 要么我使用了错误的URL。

  2. 或者图像文件的属性配置错误。我也不完全确定该选什么。我已经尝试使用构建操作ContentCopy Always,就像使用Resource一样不太确定应该如何处理图像

请告知。

对已接受答案的评论

虽然Neil的回答很中肯,但这还不够。

首先:两个构建操作似乎都在工作:ContentEmbedded Resource相似。事实并非如此。

我注意到的是,当我把图像作为图像时:

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

它确实有效。有什么不同?

Neil指出:_content文件夹,而不是wwwroot。我认为链接文档中不清楚的是正确的文件夹结构,这意味着我必须首先提供组件库名称,然后重复文件夹结构,然后提供文件名

所以我回到CSS版本,只是检查它是否仍然有效。

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

不起作用。当从DevTools级别调试它时,我注意到图像文件的CSS链接实际上指向https://localhost:7210/_content/ComponentLibraryName/_content/ComponentLibraryName/ComponentName/logo.png。当我取下双线时。。。

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

它确实起了作用。

我不想把这个解释作为接受它的答案,主要是因为唯一改变的是尼尔的答案。除此之外,我什么都不清楚。

我认为您需要使用&quot_内容";。

具体来说,如果您的图像位于名为MyComponent的dll(剃刀类库(的wwwroot文件夹中,那么我相信您需要使用引用这些静态文件

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

参见MS Doc

最新更新