背景图像未显示在 TailwindCSS + Nuxt 项目中答案

【问题标题】：Background image not displaying in a TailwindCSS + Nuxt project背景图像未显示在 TailwindCSS + Nuxt 项目中
【发布时间】：2021-11-26 03:02:36
【问题描述】：

我正在尝试在 Nuxt/Tailwind 应用程序中显示背景图像。该图像位于assets/images/ 文件夹中。这是我的 div =>

<div class="w-full h-405" style="background-image: url('~assets/images/my_image.png');">
  some text/string
</div>

图片不显示。在我的检查员中，我有


element.style {
    background-image: url(~assets/images/my_image.png);
}

如果我将鼠标悬停在链接上 ~assets/images/my_image.png 我会看到

Rendered size:  1 × 1 px
Rendered aspect ratio:  1∶1
File size:  43 B
Current source: http://localhost:3000/~assets/images/my_image.png

我的猜测是Rendered size: 1 x 1 px 表示图像未渲染。如何在不将该图像插入tailwind.config.js 文件的情况下显示背景图像？？

【问题讨论】：

【解决方案1】：

我已从assets 文件夹中删除图像文件并将它们放入static 文件夹中。为了在 Nuxt 中使用它们，我这样称呼它们

<div class="w-full h-405" style="background-image: url('/images/my_image.png');">
  some text/string
</div>

images 是static 文件夹中包含我的图像的文件夹。

【讨论】：