uniapp 发布后原生img正常，image无法显示，img与uniapp image使用区别

烂不烂问厨房2025-01-15 13:32

问题描述：

需要在本地测试和发布后图片都能正常显示，线上是把项目放在了/web目录下，使用html img src="static/images/guideArrow.png"时都能正常显示，但使用uniapp image则不行，由于image兼容性比较好，所以想改成Image格式。

测试效果：

uniapp image src="static/images/guideArrow.png"在本地和服务器都是不能正常显示的，需要改成绝对路径src="/static/images/guideArrow.png"在本地才能正常显示，但是在发布到服务器后会少个/web，导致服务器显示不了图片。

img能正常显示的原因是src解析与uniapp image src不同，src开头带不带/都是代表绝对路径（相对于服务器根目录），但在uniapp image中，不带则代表相对路径（相对于当前路由目录）。img有个特点，当使用绝对路径，服务器部署到/web时，它会在/web下找图片，但是uniapp image则不会，image使用绝对路径是直接在服务器的"/"找图片。

解决办法：

写一个url转换方法，根据不同环境加不同前缀。

复制代码

getImgUrl(url) {
   if (url) {
        return (process.env.NODE_ENV === 'production' ? '/web' : '') + url
    }
}

调用：

复制代码

<image
     :src="getImgUrl('/static/images/guideArrow.png')"
 ></image>