时间戳

首页 > 解决方案 > 在 TailwindCSS + Nuxt 项目中未显示背景图像

html - 在 TailwindCSS + Nuxt 项目中未显示背景图像

问题描述

我正在尝试在 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文件的情况下显示背景图像？

标签： htmlvue.jsnuxt.jstailwind-css

解决方案

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

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

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

推荐阅读