自定义 Tailwind 背景图像适用于特定图像，不适用于其他图像

Question

我使用 React、NextJS 和 Tailwind。

我想使用一些图像作为一些卡片元素的背景。 我首先将图像名称存储在数组中。

const symbols = ['boat_2.png', 'boat.png', 'tortue.jpg', 'surf.jpg'];

然后我映射数组并在子元素中传递名称。

                    {symbols.map((symbol, index) => (
                        <ChildElement
                            key = {index}
                            symbol = {symbol}
                        />
                    ))}

在子元素中，我使用名称来适应 Tailwind 语法：bg-[url('imagepath')]

    var bgImg = "bg-[url('../public/" + symbol + "')]"
    console.log(bgImg)

路径正确显示在控制台中。 最后，我在 div 元素的 className 中使用 bgImg 变量。

    return (
        <div
            className={`${bgImg} bg-cover bg-center bg-no-repeat aspect-[5/7] border-2 rounded-xl border-black`}
        >
        </div>
    )

问题是只有boat.png 可以工作。 所有其他图像均不显示。

我尝试访问我的图像（例如通过 localhost:3000/surf.jpg）并且它有效。

我重新启动浏览器、Visual Studio。没有任何效果。

我认为这可能是图像格式。所以我将boat.png复制到文件夹中并将其重命名为boat_2.png。 Boat.png 仍然有效，但 Boat_2.png 不行。

我尝试在 tailwind.config.ts 中制作自定义背景图像

      backgroundImage: {
        'surf': "url('../public/surf.jpg')",
      },

最后一个方法（使用 className = bg-surf）有效。但我想了解为什么第一种方法仅适用于 leboat.png 图像。 由于它是一次性使用的背景图像，我不想在 tailwind.config.ts 中指定它们，并且想修复第一种方法。 （也许我错了，应该使用这种方式）

感谢您的建议

Answer 1

这很可能是 postcss 没有包含类，因此在您的应用程序构建时它们会被删除。我认为你可以尝试将它们列入白名单，或者将 bg-* 的正则表达式列入白名单