我正在尝试创建一个Blazor组件,并将其保存在一个单独的DLL中。
简单的东西:只是一个带有图像的div。
图像被保存在前面提到的单独的DLL中,在一个看起来像wwwrootComponentNamelogo.png
的文件夹结构中。
然后在ComponentName.razor.css
文件中,我尝试将其称为:
.logo {
background-image: url('../wwwroot/ComponentName/logo.png');
width: 200px;
height: 200px;
}
我的问题是…当我在Blazor WASM网站中使用时,它不会渲染。
我相信我做错了一件事。
要么我使用了错误的URL。
或者图像文件的属性配置错误。我也不完全确定该选什么。我已经尝试使用构建操作
Content
和Copy Always
,就像使用Resource
一样不太确定应该如何处理图像
请告知。
对已接受答案的评论
虽然Neil的回答很中肯,但这还不够。
首先:两个构建操作似乎都在工作:Content
和Embedded 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;
}
它确实起了作用。
我不想把这个解释作为接受它的答案,主要是因为唯一改变的是尼尔的答案。除此之外,我什么都不清楚。
我认为您需要使用"_内容";。
具体来说,如果您的图像位于名为MyComponent的dll(剃刀类库(的wwwroot文件夹中,那么我相信您需要使用引用这些静态文件
background-image: url("./_content/MyComponent/logo.png");
参见MS Doc