Vue.js结合TailwindCSS开发时背景图片无法显示问题求助

直接内联设置背景图不生效的处理方法 #

如果是使用本地存放在src/assets目录下的图片，不能直接在模板的样式属性中写相对路径，需要先导入图片资源再绑定到样式上，示例代码如下：

<script setup>
// 导入本地背景图资源
import shoesBg from '@/assets/images/shoes-bg.jpg'
</script>

<template>
  <!-- 绑定背景图样式，注意url需要用模板字符串包裹 -->
  <div 
    :style="{ backgroundImage: `url(${shoesBg})` }" 
    class="w-full h-96 bg-cover bg-center"
  >
  </div>
</template>

注意：必须给设置背景图的元素明确指定宽高，或确保元素内部有内容撑开尺寸，否则背景图不会渲染。

自定义Tailwind类bg-shoes不生效的处理方法 #

情况1：配置在tailwind.config.js中不生效 #

首先确认tailwind.config.js的content配置项已经包含了你的Vue组件所在路径，否则自定义类不会被编译。正确的背景图扩展配置示例如下：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // 确保路径覆盖所有Vue组件
  ],
  theme: {
    extend: {
      backgroundImage: {
        // 图片存放在public目录下时直接写根路径
        'shoes': "url('/images/shoes-bg.jpg')",
        // 如果是网络图片直接填写完整链接即可
      }
    },
  },
  plugins: [],
}

存放在public目录下的资源，路径不需要加/public前缀，直接从根路径开始写即可。

情况2：图片存放在src/assets目录下的处理 #

如果图片放在src/assets目录下，不建议直接在tailwind.config.js中配置，推荐在全局CSS文件中通过@layer utilities定义自定义类：

/* 全局入口css文件，一般为src/style.css或src/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-shoes {
    /* 加~@/前缀让构建工具识别src路径别名 */
    background-image: url('~@/assets/images/shoes-bg.jpg');
    background-size: cover;
    background-position: center;
  }
}

其他注意事项 #

• Tailwind的JIT编译模式不会识别动态拼接的类名，比如bg-${imgType}，这种场景请直接使用内联样式绑定背景图，不要用动态拼接类名。
• 如果是网络背景图，确认图片链接可以正常访问，没有跨域限制。

内容的提问来源于stack exchange，提问作者Omar GR