当保存在单独的 DLL 中的 blazor 组件中时无法呈现图像

Question

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

简单的东西：只是 div 和图像。

图像保存在上述单独的 DLL 中，文件夹结构类似于 wwwroot\ComponentName\logo.png。

然后在 ComponentName.razor.css 文件中我尝试调用它：

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

我的问题是...当我在 Blazor WASM 网站中使用时，它没有呈现。

我相信我做错了一件事。

要么是我用错了URL.
或者图像文件的属性配置错误。而且我不完全确定在这里选择什么。我已经尝试使用 Build Action Content 和 Copy Always，就像我使用 Resource 一样。 不太确定，应该如何处理图像。

请指教

评论接受的答案

虽然可以在此处找到的是正确的，但还不够。

首先：两个构建操作似乎都有效：Content 和 Embedded Resource 相似。所以事实并非如此。

我注意到的是，当我实际将图像作为图像放置时：

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

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

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

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

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

没有成功。从 DevTools 级别调试它时，我注意到图像文件的 CSS link 实际上指向 https://localhost:7210/_content/ComponentLibraryName/_content/ComponentLibraryName/ComponentName/logo.png。当我删除加倍字符串时...

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

它确实有效。

我不想把这个解释写成接受它的答案，主要是因为唯一改变的是尼尔的答案。除了这些我就不清楚了。

Answer 1

我想你需要使用“_content”。

具体来说，如果您的图像位于名为 MyComponent 的 dll（razor class 库）的 wwwroot 文件夹中，那么我相信您需要使用以下方法引用此类静态文件：

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

见MS Doc

当保存在单独的 DLL 中的 blazor 组件中时无法呈现图像

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

razor-component-library

blazor-webassembly

评论接受的答案