TailwindCSS + Nuxt 背景图片

Question

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

我的 bitcoin.jpg 图片所在的 webpack 资产文件夹中有一个图片文件夹。

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

提前致谢！

Answer 1

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

<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 函数中替换它。

工作示例：https://codesandbox.io/s/late-mountain-zdw09?file=/pages/index.vue

引用供参考：

In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL

引用来源页面：https://vuejs-templates.github.io/webpack/static.html

参考：https://github.com/vuejs/vue-loader/issues/646

Answer 2

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

<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-不重复

https://tailwindcss.com/docs/background-size#class-reference

TailwindCSS + Nuxt 背景图片

TailwindCSS + Nuxt background image

javascript

vue.js

nuxt.js

tailwind-css