1

我正在尝试创建一个保存在单独 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 网站中使用时它不会呈现。

我相信我做错了一件事。

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

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

请指教。

评论接受的答案

尽管可以在此处找到的尼尔的答案是正确的，但这还不够。

首先：两个构建操作似乎都在工作：Content等等Embedded Resource。所以事实并非如此。

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

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

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

尼尔指出：_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;
}

它确实奏效了。

我不想写这个解释作为接受它的答案，主要是因为唯一改变的是尼尔的答案。除此以外，我没有清楚地理解任何事情。

4

1 回答 1

1

我认为您需要使用“_content”。

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

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

见MS 文档

于 2021-12-27T21:11:35.520 回答