Vue3+TS图片路径不对问题求助

qadan

vite  vue3项目，dev运行图片路径是：vue3根目录/public/static/icon/1.png

根据category的值去匹配路径的图片

build打包后路径是：abc.com/public/static/icon/0.png，正确应该换成abd.com/admin123/static/icon/0.png


如果直接把public换成admin123，run dev运行又不行了

我是这样写的，图片的名称需要动态的

[HTML] 纯文本查看 复制代码

 <div style="display: flex; align-items: center" v-else>
                <img style="width: 27px" :src="getIconSrc(scope.row.category)"/>
              </div>

如果直接写死没问题，动态的路径就不行


————————————————————
举个例子，vue前端404页面有个图片，打包后就没问题，但是我的代码图片是动态的（参考下图），根据索引来获取图片，我试过把图片路径写死就不会报错，如果是动态路径就报错



总结：本地运行可以，部署到云上路径就出错，找不到图片




______2024年4月12日20:31:41更新




上面两个图片是代码写死的，路径如下，无法显示的图片是动态的index索引，admin123是yarn run build加上的后端路径
abc.com/admin123/static/icon/0.png代码写死的
abc.com/public/static/icon/6.png,6数字是动态的

hejian0301

读一下文档，生产环境不支持动态url；

看你描述，应该没有配置base，但是没明白admin123又是哪来的？

我认为，不需要使用 new URL。

如果没有配置base，直接`/public/static/icon/${index}.png`

如果配置了base: admin123，`/admin123/public/static/icon/${index}.png`

最好贴一下vite配置；

zhangzan0224

貌似打包的时候 有个publicPath 查一查

qadan

zhangzan0224 发表于 2024-4-12 17:13
貌似打包的时候 有个publicPath 查一查

应该不是这个问题，举个例子，vue前端404页面有个图片，打包后就没问题，但是我的代码图片是动态的，根据索引来获取图片，我试过把图片路径写死就不会报错，如果是动态路径就报错

mr88fang

你这个“正确应该换成abd.com/admin123/static/icon/0.png” 是怎么来？，怎么打包怎么部署就可以啊！干嘛要把这个文件路径名称给改了？？？，是用nginx部署的吗？是nginx 代{过}{滤}理 admin123 到 public 路径下了？还是 public 被占用了？
“如果直接把public换成admin123” 那肯定不行啊。

qadan

mr88fang 发表于 2024-4-12 17:15
你这个“正确应该换成abd.com/admin123/static/icon/0.png” 是怎么来？，怎么打包怎么部署就可以啊！干嘛 ...

后端thinkphp框架，运行路径public，不需要public这个目录，而打包后的vue正在admin123目录

mr88fang

qadan 发表于 2024-4-12 17:16
后端thinkphp框架，运行路径public，不需要public这个目录，而打包后的vue正在admin123目录

你贴一下打包后目录结构是怎么样的，或者写一下

啊笨

是不是<script setup>没有抛出这个变量。在这种模式下变量不可见。需要手动抛出

啊笨

看你的示例代码里面更本没有admin123这个文件夹？？？？这个文件夹哪里来的？

qadan

啊笨 发表于 2024-4-12 18:55
看你的示例代码里面更本没有admin123这个文件夹？？？？这个文件夹哪里来的？

yarn run build 打包后的路径是后端域名/admin123