问题描述
我在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背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！