TailwindCSS+Nuxt项目不配置tailwind.config.js时背景图无法显示如何解决

Nuxt 内置的~/~~资源别名默认仅会在 <template> 标签的资源绑定、<style> 样式块、JS/TS 导入语句中被打包工具（Vite/Webpack）自动解析，你直接写在内联style属性里的别名不会被处理，浏览器会把它当成普通相对路径发起请求，返回的404响应被当作图片加载，所以才会出现1×1px的异常渲染结果。

• 方案1：动态绑定内联样式（适用于图片存放在assets目录的场景）
  先在script中导入图片资源，再绑定到style属性，导入时打包工具会自动处理路径生成正确的可访问地址：

<script setup>
// 导入时别名会被自动解析
import myImage from '~/assets/images/my_image.png'
</script>

<template>
  <div 
    class="w-full h-405 bg-center bg-cover" 
    :style="{ backgroundImage: `url(${myImage})` }"
  >
    some text/string
  </div>
</template>

• 方案2：将图片移到public目录（适合无需打包处理的静态资源）
  把my_image.png放到项目根目录的public/images/路径下，直接用根路径引用即可，不需要用到别名也不需要导入：

<div 
  class="w-full h-405 bg-center bg-cover" 
  style="background-image: url('/images/my_image.png');"
>
  some text/string
</div>

• 方案3：将背景样式写到style块中
  <style>块内的资源路径别名会被自动解析，直接写即可：

<template>
  <div class="w-full h-405 bg-my-image bg-center bg-cover">
    some text/string
  </div>
</template>

<style scoped>
.bg-my-image {
  background-image: url('~/assets/images/my_image.png');
}
</style>

补充提示：可根据需要搭配bg-no-repeat、bg-contain等Tailwind背景类调整显示效果，避免出现图片重复、拉伸异常等问题。

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