欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 社会 > uniapp 发布后原生img正常,image无法显示,img与uniapp image使用区别

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

2025/1/17 22:04:19 来源:https://blog.csdn.net/weixin_44294359/article/details/145118200  浏览:    关键词:uniapp 发布后原生img正常,image无法显示,img与uniapp image使用区别

问题描述:
需要在本地测试和发布后图片都能正常显示,线上是把项目放在了/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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com