uniapp 加载非png、jpg后缀的图片在app端遇到的问题

最新推荐文章于 2025-01-14 10:35:05 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue Web前端 Android 文章标签： vue.js 前端 css

本文链接：https://blog.csdn.net/qq_32136827/article/details/123022914

Android 同时被 3 个专栏收录

79 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

Web前端

2 篇文章

订阅专栏

本文主要介绍了在uniapp项目中遇到的问题：图片在小程序或H5正常显示，但在App上不显示。解决方案包括在index.html中添加mate标签以改变referrer策略，以及将image标签替换为img标签。对于样式兼容性问题，提供了条件注释的代码示例以确保在不同平台上的正常显示。最后，提醒如果问题依旧存在，可以寻求社区帮助。

出现情况：在小程序或者H5端运行一切正常，但是运行到app上以后，代码不报错，图片不显示

原始代码，src是一张文件类型的图片，但不是.png或.jpg后缀结尾

<image :src="http://img5.adesk.com/61a306057e978a3b3e3ae24e?sign=a797fd6ea7ca3fdf36fa97deb83a3711&t=6210dbbf" />

那么如何解决此问题呢
1、在uniapp项目根路径下面的index.html文件内添加mate标签

<meta name="referrer" content="no-referrer"/>

2、在vue代码里把上面image标签变成img标签即可

<img :src="http://img5.adesk.com/61a306057e978a3b3e3ae24e?sign=a797fd6ea7ca3fdf36fa97deb83a3711&t=6210dbbf" />

项目重新运行生效，如果还不行，重启HbuilderX，再次运行即可

注意注意注意
此时图片是可以正常在小程序或H5端或app上正常显示了，那么由于小程序识别的是image标签，此时你的css渲染样式可能会失效，那么只能通过代码多平台兼容来解决了，好了上代码

<!-- #ifdef H5 || MP-WEIXIN -->
<image :src="item.thumb" />
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<img :src="item.thumb" />
<!-- #endif -->

如果还有问题，把问题留在评论区，我们一起来打BUG