拖尾css+Nuxt背景图片 [英] TailwindCSS + Nuxt background image

问题描述

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

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

我已尝试使用<header class="bg-fixed" style="background-image: url(~assets/images/bitcoin.jpg)" 这不管用，我也试过类绑定，那也不管用。谁有办法解决这个问题？

提前谢谢！

推荐答案

尝试此操作(编辑：此操作不起作用，向下滚动)：

<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

参考报价：

为了让webpack返回正确的资源路径，您需要使用Required(‘./Relative/Path/to/file.jpg’)，它将由文件加载器处理并返回解析后的URL

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

引用：https://github.com/vuejs/vue-loader/issues/646

这篇关于拖尾css+Nuxt背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！