TailwindCSS + Nuxt 背景图片答案

【问题标题】：TailwindCSS + Nuxt background imageTailwindCSS + Nuxt 背景图片
【发布时间】：2020-11-13 12:55:16
【问题描述】：

我在 Nuxt 项目中使用 TailwindCSS，并尝试将背景图像添加到标题元素。 tailwindCSS 官方文档解决方案如下：<div class="bg-fixed ..." style="background-image: url(...)"></div>

我的 bitcoin.jpg 图像所在的 webpack assets 文件夹中有一个 images 文件夹。

我尝试过使用<header class="bg-fixed" style="background-image: url(~assets/images/bitcoin.jpg)" 这不起作用，我也尝试过类绑定，这也不起作用。有人对修复有任何想法吗？

提前致谢！

【问题讨论】：

【解决方案1】：

标题没有任何内容，也没有高度或宽度，因此不显示。而且你看不到背景。一个可行的解决方案是：

<div class="bg-fixed w-full" style="background-image: url('/images/bitcoin.jpg'); min-height: 200px;" />

我添加了 100% 的宽度和 200 像素的最小高度。而且，您似乎错过了图像路径周围的单引号。

bg-fixed 不是最好的解决方案，您应该尝试 bg-cover 或 bg-contain bg-no-repeat

【讨论】：

【解决方案2】：

试试这个（编辑：这不起作用，向下滚动）：

<header class="bg-fixed" style="background-image: url(~@/assets/images/bitcoin.jpg)"

~ 告诉 webpack 将 url 视为模块请求，然后您需要使用正确的别名。在nuxt中，这些通常以@为前缀。

编辑

我没有意识到 Webpack 的底层发生了一些奇怪的事情。该语法适用于 src 属性，但 Webpack 不会为 background-image 进行路径解析。

这是真正的解决方法：

<header class="bg-fixed" :style="{'background-image': `url(${require('@/assets/images/bitcoin.jpg')})`}"

通过使用 require，您向 Webpack 发出信号以使用 file-loader 创建正确的模块路径，并在 url 函数中替换它。

引用供参考：

为了让 Webpack 返回正确的资源路径，你需要使用 require('./relative/path/to/file.jpg')，它会被 file-loader 处理并返回解析后的 URL

【讨论】：

感谢您的回答。我也试过了，不幸的是这也不起作用，我仍然得到 'GET localhost:3000/~@/assets/images/bitcoin.jpg 404 (Not Found)
@Christian.P 我添加了一个更新和一个解决问题的工作示例，看起来是对 Vue 的 Webpack 配置如何在后台定义的限制。