从dist文件夹打开index.html时图片不显示的解决方案咨询

针对你的场景，绝对不要直接引用/src/assets下的图片到生产环境的index.html中——因为生产部署时你只会把/dist文件夹上传到服务器，/src目录根本不会出现在服务器上，直接引用会导致图片404加载失败。正确的做法是把静态资源处理后打包到/dist目录中，下面分两种常见场景给出具体方案：

场景1：React组件中通过import引入图片 #

如果你的图片是在React组件里通过import方式使用的（比如import avatar from '../assets/img/avatar.png'），推荐用file-loader或url-loader让Webpack自动处理图片资源：

1. 先安装依赖：

   npm install file-loader --save-dev
   

2. 在Webpack配置文件中添加图片处理规则：

   module.exports = {
     // 其他配置（entry、output、babel规则等）
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif|svg)$/i,
           use: [
             {
               loader: 'file-loader',
               options: {
                 // 输出的文件名（加hash防止缓存问题）
                 name: '[name].[hash:8].[ext]',
                 // 图片输出到dist下的assets/img目录
                 outputPath: 'assets/img',
                 // 图片引用时的相对路径
                 publicPath: 'assets/img'
               }
             }
           ]
         }
       ]
     }
   }
   

3. 在组件中正常使用即可：

   import avatar from '../assets/img/avatar.png';
   
   function Profile() {
     return <img src={avatar} alt="用户头像" />;
   }
   

Webpack会自动把图片复制到dist/assets/img目录，并替换组件中的引用路径为正确的生产环境路径。

场景2：直接在index.html或全局样式中引用的静态资源 #

如果有一些不需要通过组件import的静态资源（比如index.html里的背景图、全局图标），可以用copy-webpack-plugin把整个src/assets目录复制到dist中：

1. 安装对应版本的插件（Webpack 4需要用v6及以下版本，v7+仅支持Webpack 5）：

   npm install copy-webpack-plugin@6 --save-dev
   

2. 在Webpack配置中添加插件：

   const CopyWebpackPlugin = require('copy-webpack-plugin');
   
   module.exports = {
     // 其他配置
     plugins: [
       // 其他插件（比如HtmlWebpackPlugin）
       new CopyWebpackPlugin({
         patterns: [
           { from: 'src/assets', to: 'assets' } // 将src/assets复制到dist/assets
         ]
       })
     ]
   }
   

3. 在index.html或样式中用相对路径引用：

   <!-- dist/index.html中 -->
   <img src="./assets/img/banner.png" alt="首页横幅" />
   

为什么不推荐baseUrl引用/src/assets？ #

生产环境部署时，服务器上只会存在/dist目录下的文件，/src目录不会被上传，此时无论怎么设置baseUrl，服务器都找不到/src/assets下的资源，必然会出现图片加载失败的问题。

综上，把所有静态资源打包到/dist目录是生产环境下的标准做法，既保证资源能正常访问，也便于统一部署。

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