vue打包后添加图片文件不显示

Question

1. vue+springboot项目
2. 图片文件存储的位置是D:\nginx-1.24.0\html\dist\img，可以理解为我的nginx服务器地址，只不过是本地的

1. 图片进行存储后是以原名称存储的，不存在vue进行的二次命名。
2. vue项目调用图片显示的代码，背景：数据表格内的图片展示

  <el-table-column width="160vh" prop="img19" label="发货图片19" >
                  <template #default="scope">
                    <div style="width: auto ;height: auto;display: flex;align-items: center;">
                      <el-image
                          fit="fill"
                          :src="scope.row.img19?require(`/public/img/${scope.row.img19}`):''"
                      ></el-image>
                    </div>
                  </template>
                </el-table-column>

1. 上文代码所展示的图片只能使用vue打包后的二次编码图片，普通的未二次编码的文件不会显示

正常图片                3c6407b6d501410eabd8e156b2393fb1.jpg

vue二次编码图片                3c6407b6d501410eabd8e156b2393fb1.d8a2cb66.jpg

1. 综上所述，我的问题就是无法在页面动态添加图片并显示，只能使用项目打包好的图片。

Answer 1

• 你可以考虑将图片文件放置在Vue项目的public目录下：将您的图片文件（例如3c6407b6d501410eabd8e156b2393fb1.jpg）放置在Vue项目的public目录下，而不是放在src目录下

• 并且使用绝对路径引用图片：在您的Vue代码中，将图片的src路径修改为绝对路径，例如/img/3c6407b6d501410eabd8e156b2393fb1.jpg。这样做可以确保图片能够正确加载

• 删除require函数：在Vue代码中，去掉require()函数，并直接使用绝对路径作为图片的src。require函数在Vue中主要用于加载模块化的资源，但您的图片并不需要模块化加载，所以可以直接使用绝对路径。

代码大致如下

<el-table-column width="160vh" prop="img19" label="发货图片19">
  <template #default="scope">
    <div style="width: auto ;height: auto;display: flex;align-items: center;">
      <el-image
        fit="fill"
        :src="scope.row.img19 ? '/img/' + scope.row.img19 : ''"
      ></el-image>
    </div>
  </template>
</el-table-column>