Vite+React+Tailwind WebApp部署Netlify后图片不显示问题求助

1. 修正静态资源引用方式 #

• 若图片存放在src/assets目录，必须通过ES模块导入引用，不能直接写相对路径：

  // 正确写法
  import avatar from './assets/avatar.png';
  <img src={avatar} alt="用户头像" />
  

  // 错误写法（Vite打包时不会处理这类路径，导致图片丢失）
  <img src="./assets/avatar.png" alt="用户头像" />
  

• 若图片放在public目录，引用时要以/开头（对应dist根目录）：

  <img src="/banner.png" alt="首页横幅" />
  

2. 调整Vite资源配置 #

在vite.config.js里确保assetsInclude覆盖你用到的所有图片格式，避免Vite忽略部分资源：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.png', '**/*.jpg', '**/*.webp', '**/*.svg', '**/*.gif'],
  build: {
    assetsDir: 'assets', // 保持默认资源目录，若修改过需确认对应路径
  },
});

3. 检查Tailwind背景图片配置 #

如果用Tailwind设置背景图，注意两个关键点：

• tailwind.config.js的content必须包含所有用到背景图的组件文件，不然Tailwind会把未检测到的样式树摇掉：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}", // 覆盖所有src下的组件文件
    ],
    theme: {
      extend: {
        backgroundImage: {
          // src目录下的图片要写完整相对路径
          'hero-bg': "url('/src/assets/hero-bg.png')",
          // public目录下的图片直接以/开头
          'footer-bg': "url('/footer-bg.png')",
        },
      },
    },
    plugins: [],
  }
  

4. 本地预验证+Netlify部署检查 #

• 先在本地执行npm run build，打开dist/assets目录确认所有图片是否存在：
  • 如果本地打包就缺图，说明是本地构建配置问题，和Netlify无关
  • 检查.gitignore是否误排除了图片文件，导致仓库里没有这些资源
• Netlify端确认构建命令是npm run build，发布目录设置为dist，查看部署日志有没有资源相关报错

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