uniapp加载本地图片的坑

最新推荐文章于 2024-08-20 10:22:29 发布
最新推荐文章于 2024-08-20 10:22:29 发布
阅读量1.2w 收藏 9
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43575792/article/details/119867841
版权

问题

这次遇到的问题是在uniapp内加载本地图片，本来我在image的src里面直接填写本地图片路径是毫无问题的，后面我将路径填写在绑定的数据src上,直接不显示了。

原先的写法和效果图
在这里插入图片描述在这里插入图片描述

出错的写法和效果图，不显示但也不报错
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

解决

其实这属于uniapp的一个坑，因为博主尝试将src的内容换成网络图片路径，如下图是可以正常使用的，所以只有加载本地图片时会出现这种问题，解决的办法也很简单，在src里面的内容加上require("")
在这里插入图片描述
具体的写法如下：
在这里插入图片描述
加载成功
在这里插入图片描述

上述内容如果存在问题欢迎大家批评指正！！！

bug别找我
关注
uniapp 好用的图片懒加载组件.zip
06-26
3. **图片状态管理**：为每个图片设置未加载、加载中和已加载三种状态，根据状态决定何时加载图片。 4. **计算图片位置**：根据DOM元素的位置和窗口大小，计算图片是否在视口内或即将进入视口。 5. **加载策略**：...
uniapp 引用图片地址
wangjun5159的专栏
01-04 1万+
根据uniapp官方目录结构，静态资源都放在static目录下 结合vue loader处理资源路径原则 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。 所以代码中可以这样写 <template> <img src="/static/some.png"/> </template> ...
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
热门推荐
i_am_a_div的博客
07-21 2万+
uni-app小程序图片使用有image标签和background-image背景图两种方式： 下有获取本地图片的网络地址方式：见第四步 一、方式一：使用image标签引入： 1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示 目前支持以下四种方式引入： <view>引入image的绝对路径src：</view> <image src="~@/static/iconimg/big.png"
uni-app小程序全局动态引入图片路径方法（小程序分包过大，图片存储到服务器）
最新发布
2302_77005870的博客
08-20 279
XXX/static 服务器上存放图片的根路径，应该与项目开发时图片存储路径保持一致。uni.scss样式文件中使用变量 如下。在main.js中写如下代码。
uni-app image引入本地图片不显示，以及如何动态引入本地图片
eren_yeger的博客
05-09 2909
我们在uni-app中使用image标签引入本地图片的时候，会出现引入以后本地图片不显示的情况，这是因为引入的路径不对。在uni-app中使用image 相对路径或者绝对路径必须要加上/才可以。你是不是写成了 status/img/XXX.jpg了呢。动态引入本地图片的话可以使用require，如下。
uniapp引入本地图片
Qing_X_C的博客
07-31 1万+
注意使用相对路径，需要require <image class="" mode="aspectFill" :lazy-load="true" :src="require('./img/beauty.png')" />
uniapp微信小程序无法使用本地静态资源图片，背景图在真机不显示方法
我总是词不达意的博客
09-30 1万+
uniapp微信小程序背景图的显示问题。微信小程序无法使用本地静态资源图片作为背景图解决办法。
uniapp解决文件及图片下载预览
10-24
同时，可以使用`@load`和`@error`事件处理图片加载状态。 二、文件下载 1. 使用a标签：对于支持直接下载的文件类型（如.txt、.pdf），可以通过创建隐藏的`<a>`标签，设置`href`为文件URL，触发点击事件实现下载。...
uniapp 获取图片的MD5
06-12
资源文件
uniapp小程序绘制二维码生成图片保存到本地
06-24
今天用uniapp写小程序二维码并保存到本地，网上的完全没有用，最后自己写了一个， 1.使用weapp.qrcode生成二维码，并使用uni.canvasToTempFilePath生成临时图片文件， 2.使用canvas绘制二维码， 3.使用uni....
uniapp 生成海报图片base64转换
04-16
uniapp 生成海报图片base64转换 （微信头像贴在海报上需要base64转换）import { pathToBase64, base64ToPath } from "路径" base64ToPath(res.data.data.poster) .then(path => {}） .catch(error => { ...
在uni-app当中引入本地图片注意事项以及阿里矢量图iconfont.css当中文件查找失败:‘./iconfont.eot解决办法
任磊
06-18 3405
使用绝对路径
uniapp选取本地资源(图片,视频,文件)
m0_67388537的博客
07-19 6359
current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考。1.9.5+ 支持传图片在 urls 中的索引值。，其中 B1 与 B2 的图片链接是一样的。从本地相册选择图片或使用相机拍照。拍摄或从手机相册中选择图片或视频。
uni-app——小程序实现本地图片的上传以及身份证的智能识别
Bonsoir777的博客
12-29 5002
本文主要讲解uni-app中如何实现本地图片上传的方法
uniapp开发微信小程序 ，使用本地图片做背景图应该怎么处理
qq_43468165的博客
02-22 2579
注意，把获取可用的base64地址的方法放在computed 里面是非常必要的。如果放在methods里面初次进入这个页面时候会报错（除了首页之外）。这里就是跟methods和computed特性有关。
uniapp图片无法显示
progrmmmm的博客
01-13 2万+
首先确定是在什么环境下不展示图片，确定你的标签是<img>还是<image>,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法。 一、引用本地文件中存储的图片 (1)真机环境 (2)网页环境 二、引用localhost或者127的本地服务器图片 (1)真机环境 (2)网页环境 三、引用本地服务器开启的端口的图片 (1)真机环境 (2)网页环境 四、富文本...
uniApp引用本地矢量图文件
80岁小姑娘的博客
09-26 561
这样就可以本地只用矢量图了。
uni-app图片读取问题
Lichsten的博客
08-11 3711
uni-app图片读取只能从静态资源或者使用网络图片 如果想使用本地图片的话需要将路径映射到磁盘路径中去。这里我们在properties中写： filePath=D:/temp/images/ spring.resources.static-locations=classpath:static/**spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/stati
uniapp实现图片上传
sk19969306105的博客
08-18 1万+
我最开始也不是很理解为什么明明这两个路径是后端给我的，难道后端自己在往DB里存的时候就不能获取吗。之后和后端的哥们讨论了一下，他的解释是：完全可以做到，但是如果把接受解析上传的图片资源，生成路径，再把路径存到DB中，最后到前端接受到成功的信息，这一套下来用户需要等待大量（可能吧）的时间，所以为了提升用户体验，尽量不要把所有的处理都放在这一次事件里做。后端会解析拿到的图片资源并返回一个临时路径和绝对路径，在成功的回调中给。因为只有一张图片，所以直接用的字符串，如果需要多张，可以用数组做v-for。......
uniapp下拉加载的坑
07-09
在UniApp中，下拉加载可能会遇到一些坑，以下是一些常见问题和解决方案： 1. 下拉加载的触发时机：UniApp中的下拉加载可以通过监听页面的`@scrolltolower`事件来触发加载，但是有时候这个事件可能会触发多次，导致加载多次的情况。解决方案是在触发加载后，立即禁用加载功能，直到加载完成后再开启。 2. 加载数据的处理：在下拉加载时，一般是需要向服务器请求数据并更新页面的。在处理数据时，需要注意以下几点： - 避免重复请求：可以通过设置一个标志位来避免重复请求，只有在上一次请求完成后才能进行下一次请求。 - 数据合并：下拉加载一般是要将新加载的数据与已有的数据进行合并，更新页面显示。可以通过使用数组的`concat`方法或者使用扩展运算符来实现数据合并。 - 错误处理：在请求数据时，可能会遇到网络错误等异常情况。需要对这些错误进行处理，例如显示错误提示或者重新加载数据。 3. 加载动画的显示：下拉加载时，可以显示一个加载动画来提示用户正在加载数据。UniApp中可以使用组件库中的加载动画组件，例如`uni-load-more`组件，来实现加载动画的显示和隐藏。 4. 加载状态的管理：在下拉加载时，需要管理加载状态，例如显示加载中、加载完成或加载失败等状态。可以通过使用一个状态变量来管理加载状态，并在不同状态下显示不同的提示信息。 总结起来，下拉加载在UniApp中可能会遇到一些坑，但是通过合理的处理和避免一些常见问题，可以实现良好的下拉加载功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值