解决：vue项目npm run build 打包后 :src路径里面的本地图片找不到。

男娘i 2023-10-11 12:08 30阅读 0赞

### 问题描述及错误代码： ###

// 本地运行、打包  图片是ok的
    <img src="../../static/images/orderSeeProgress0.png">     
    
    // 本地运行 图片是ok的、打包图片找不到  (因为图片的路径被解析成了字符串)
    <img src="/static/images/orderSeeProgress1.png">   
    
    // 本地运行 图片是ok的、打包图片找不到  (因为图片的路径被解析成了字符串)
    <img :src="'../../static/images/orderSeeProgress'+index+'.png'">

### 解决办法： ###

（1）如果使用的是静态图片，切路径地址不会改变，那就直接使用 **src** 如下方法：（相对路径的）

// 本地运行、打包  图片是ok的
    <img src="../../static/images/orderSeeProgress0.png">

（2）如果图片是根据数据动态变化的，那么就得使用 **:src**  ( 动态改变src的值)

（2-1）首先在配置文件里面给static文件起个别名：（我起得别名是@@）

build / webpack.base.conf.js  配置别名如下：

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          '@@': resolve('static'),
        }
      },

（2-2）引入图片地址，然后在data里面定义，在 :src里面使用。

// 这样使用：  本地、打包后 图片都是ok的。
    <img  :src="orderPro1Img" />
    <img  :src="orderPro2Img" />
    
    
    
    <script>
      import orderPro1 from '@@/images/orderSeeProgress0.png'
      import orderPro2 from '@@/images/orderSeeProgress1.png'
      export default {
        data() {
          return {
            msg: '',
            index:0,
            orderPro1Img:orderPro1,
            orderPro2Img:orderPro2
          }
        },
    }
    </script>