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

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

图片进行存储后是以原名称存储的，不存在vue进行的二次命名。
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>

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

正常图片                3c6407b6d501410eabd8e156b2393fb1.jpg

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

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

你可以考虑将图片文件放置在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>

把img文件夹通过nginx发布出来发布，然后通过url访问（http://你的系统端口/img/图片名.jpg）


     location /img/ {
        alias html/dist/static/img/;
        autoindex on;
   }

这篇博客: 面试宝典六-- 项目部署（linux环境搭建，springboot项目部署，vue项目部署，nginx负载均衡）中的 1、备份原镜像文件，以免出错后可以恢复 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup

webpack或其他对图片文件做了二次编码，js对应的地址代码也会跟着修改
方法
1.去掉打包的二次编码
2.找到编译后的代码并改掉
3.服务器图片文件加上二次编码的部分
4.url使用服务器地址