uniapp image 标签手机端不显示

最新推荐文章于 2024-07-31 08:57:37 发布
最新推荐文章于 2024-07-31 08:57:37 发布
阅读量2.9k 收藏
点赞数
分类专栏： uniapp 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55552785/article/details/117446624
版权

这样写能在PC端显示，但是，会发现在手机端无法显示也不报错

<image src="../../static/mine/order@3x.png" mode="widthFix" />

原因：

  1. 照片命名为中文
  2. uniapp 中 image 标签有个默认的宽高，会影响到image显示不正常（解决：mode=“widthFix”）
  3. 引入路径不是绝对路径 （解决：/static/mine/order@3x.png）

uni-app 相对路径相对于引用页面的路径,H5则是相对于使用页面的路径

我我在线睡觉
关注
专栏目录
uniapp - 实现手机端H5网页直播功能效果，拿到后端推流地址或播放资源后进行前端的流畅播放和画面展示功能，uniapp实时推流/拉流直播系统详细教程（提供完整示例代码，一键复制开箱即用！）
高级前端工程师
12-28 4539
uniapp，h5网页，手机端H5网页，uniapp h5直播功能页面，uniapp直播实时推送显示，uniapp h5直播怎么做，怎么使用uniapp去实现移动端手机H5直播，h5 vue+uniapp怎么做直播，uniapp中使用videojs构建H5直播播放器，uniappH5端怎么实现直播推流，uniapp如何实现直播，直播聊天功能，h5平台端直播用什么插件，uniapp手机网页直播用什么组件插件播放器，uniapp手机H5直播播放器详细教程，直播项目，怎么使用vue+uniapp怎么做H5实时直播
uniapp [全端兼容] - 最新详细实现发送emoji表情包及自定义图片图标小表情功能，支持文字与表情混合显示或光标处插表情，安卓苹果手机显示无差异，类似QQ微信聊天框弹出左右滑动选择表情发送显示
最新发布
王佳斌
08-24 4197
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，表情，emoji，图片表情包，带表情图片输入框，emoji表情，文字穿插表情消息处理，表情包发送显示，详细使用emoji表情包，在输入框中发送及显示emoji表情，类似微信聊天的小表情，支持文字与表情混合在一起，emoji表情插件，聊天发表情，如何使用图片替代，图标表情，图片表情，安卓苹果ios多端通用，显示乱码，表情是灰色没有颜色，用不了兼容不行，怎么存入数据库，表情必须放到服务器上吗，显示有问题，
uni-app image手机端不显示bug
beifanggongy的专栏
12-28 657
1.uni-app 相对路径相对于引用页面的路径,H5则是相对于使用页面的路径; 2.uni-app 中图片名称不要使用中文,否则手机端不显示,pc端正常
uniapp运行到安卓基座app/img标签不显示
Xiang_Gong_Ya_的博客
12-01 1661
img是html中的标签，他也是一个单标签image属于服务器控件，是个双标签。
uniapp image图片显示问题
qq_56144522的博客
07-31 1068
1.起初是认为在uniapp开发wx小程序是不允许采用加载本地资源的问题，发现可以在css样式中引入通过background-image：url（）中可以显示出来问题，但是通过image去引入就发现图片显示不出来，报 “图片不能从本地加载”error。*在UniApp中，相对路径的解析也会受到框架的影响，因为UniApp将代码编译成小程序代码时可能会进行一些路径的转换。在小程序中，相对路径的解析可能会受到文件结构的影响，确保相对路径的正确性。在UniApp的项目结构中，将图片文件放在特定的目录（如。
关于UNI-APP中组件使用image引入图片在app中不显示
滑蛋猪肠粉的博客
04-11 4760
关于UNI-APP中组件使用image引入图片在app中不显示 首先检查自己有没有使用绝对路径，相对路径是不行的； 如果还是不行，看一下放图片的文件夹是不是命名为image，把image改成其他，例如img，就可以显示了； ( 不知道是什么鬼原因 ) ...
uni-app引入阿里矢量图在移动端不显示的问题
weixin_30642267的博客
05-29 1435
1、uni-app引入字体图标是不支持本地的， 所以在调用的时候直接复制阿里的在线图标粘贴到vue.app下的style下： 2、在其他文件中调用方式： 在开始我没加请求头在微信开发者工具里运行是能显示的，在移动端就显示空白了，之前是没有加那个请求头，估计是手机浏览器不会默认加请求头的缘故 转载于:https://www.cnblogs.com/Dark-fire-liehuo/...
用uniapp的props动态传image的url时，移动端无法显示图片？
m0_51066449的博客
05-19 1291
解决方法： 1.检查image标签的src属性是否为动态绑定，若直接放在style属性里，改成如下形式： <image :src='box.url'></image> 2.用require请求动态路径 imgs: [ require('../../static/index-icon/vegetable@2x.png'), require('../../static/index-icon/vegetable@2x.png'), requi
微信小程序的background在手机不显示
WYH1205的博客
07-30 1737
微信小程序的背景图片在微信开发者工具中正常显示，但是在手机端不显示图片。 设置图片全屏样式 style="background:url('https://api.plus.123rf.com.cn/as/46406114.jpg');background-size:100% 100%;" .container{ width:100vw; height:100vh } 在手机端不显示的原...
uniapp适用移动端的富文本组件
08-10
在移动应用开发中，富文本组件是不可或缺的一部分，它允许用户输入、编辑和展示格式化的文本，例如带有字体、颜色、图片、链接等多样化的文本内容。uni-app是一款跨平台的开发框架，它允许开发者使用一套代码实现多...
pdf.js转pdf为图片展示 兼容手机端查看pdf
07-24
4. 为了在微信浏览器中更好地显示，可能需要对图片进行一些优化，比如调整分辨率、压缩图片大小等，以适应手机端的性能和网络条件。 以上就是使用PDF.js将PDF转换为图片并在微信浏览器中展示的基本流程。这个解决...
uni-app本地图片真机不显示
louxinuo的博客
12-22 3086
我是将图片的中文路径和名称改为了英文之后就解决了！
小程序view标签包裹image标签在部分机型图片无法全部展示
weixin_43292375的博客
12-17 756
小程序view标签包裹image标签在部分机型无法全铺展示的兼容问题 今天在iphone6,iphone6p,安卓8系统里，遇见了view包裹着image标签，但是没有铺满 在其他区域这块是能够展示的 考虑到可能是2方面出现了问题： 1. image标签mode属性 2.css代码兼容 后来查了下image标签属性 这是调整后的代码 所有机型都可以展示出来了~~ ...
uni-app使用image在app段不生效
kangluon的博客
09-23 853
<image class="user-img" src="../../static/img/user-img.png" mode="widthFix"></image> 我这样写的 浏览器上能显示，但是真机就不行，然后看了说不能相对路径，改成了 <image class="user-img" src="/static/img/user-img.png" mode="widthFix"></image> 还是不行、、还是不行 试了各种引入，最后发现要重启一下
UNI-APP_uniapp image图片高度不能自适应的问题[widthFix]
小歪博客
06-11 5613
在iamge标签里定义 mode=“widthFix” 就行了 组件image=>mode=>widthFix:宽度不变，高度自动变化，保持原图宽高比不变 <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2611367090,3953241077&fm=26&gp=0.jpg" mode="widthFix></image> ...
uniapp中如何如何让图⽚宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
zz_ll9023的博客
01-28 1307
在上面的样式中，将图片元素的类设置为 "image-class"，这样你可以将样式应用到你的图片上。将 width 属性设置为 100%，这将使图片的宽度等于其容器的宽度。将 height 属性设置为 auto，这将使图片的高度自动调整，以保持原始的宽高比。这样设置后，图片的宽度将保持不变，高度将自动变化，同时保持原始的宽高比。在这个例子中，图片的宽度被设置为不变，高度则根据原始的宽高比自动调整。在 UniApp 中，你可以使用 CSS 来控制图片的宽度并使其高度自动调整，以保持原始的宽高比。
H5中img标签引入https图片在安卓和ios不显示
Mangojjx的博客
05-23 5104
引入的src图片地址是https时，在pc端和h5均正常显示，但在手机端均无法显示，并且图片链接在微信里面也无法打开； 于是尝试将地址复制去浏览器及其他地方（除微信）均能正常显示； 并且尝试用http图片在任何地方，包含微信都能正常显示； 于是找度娘，说明在src中引用网络图片无法显示，这因为在引用链接时,浏览器对地址发起请求加上了refre这个请求头,而有些服务器能根据refre反盗所以引用失败...
h5页面背景图在移动端不显示
w_jiunian的博客
06-25 957
a{ background: url('../img/bg.png') repeat-y ; background-size: 100%; width: 100vw } 在移动端页面过长不显示背景图 修改方法 a{ background: url('../img/bg.png'); background-repeat: repeat; background-size: 100% 100%; width: 100vw } ...
uniapp 图片保持宽高比，撑满屏幕宽度
朝阳39的博客
01-15 1767
image 标签添加样式。image 标签添加。
uniapp image添加标签
05-23
在uniapp中，我们可以使用u-parse组件来给图片添加标签。具体实现步骤如下： ...以上就是uniapp image添加标签的实现方法，具体效果可以根据自己的需求进行修改。如果您还有其他问题，欢迎继续提问。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值