使用next.js动态设置bg-url时不加载图像

Question

当我试图从prop值动态设置背景图像时遇到了一个奇怪的问题。下面是我的代码:

<div className={"bg-cover bg-[url('" + props.img_src + "')]"}></div>

当我第一次添加新图像(位于img_src="/img.png")时，没有任何渲染。我查看了JS控制台的网络请求，没有发送任何内容。然而，当我在这一行添加:

<div className={"bg-cover bg-[url('" + props.img_src + "')]"}></div>
<div className={"bg-cover bg-[url('/img.png')]"}></div>

突然，两个图像都被渲染了。现在我删除最后一行，我的代码变成了我之前的代码:

<div className={"bg-cover bg-[url('" + props.img_src + "')]"}></div>

现在渲染正确。这里到底发生了什么?

Answer 1

这是因为tree-shaking属性，这意味着没有在源文件中指定的任何class不会在输出文件中创建.

From the docs:

Tailwind提取类名最重要的含义是，它只会找到源文件中作为完整字符串存在的类。

如果你使用字符串插值或将部分类名连接在一起，Tailwind将不会找到它们，因此不会生成相应的CSS。

如果你想让动态类工作，你需要

1. 在项目的其他地方使用它，以便在输出文件(您的情况)中生成

2. 预先保存所有图像。

   示例代码:

   module.exports = {
   content: [
   ...
   ],
   safelist: [
   {
   pattern: /bg-+/,
   },
   ],
   ...
   }