解决uni-app中image动态绑定本地图片显示不出来的问题

最新推荐文章于 2024-05-17 16:25:58 发布
最新推荐文章于 2024-05-17 16:25:58 发布
阅读量6.3k 收藏 5
点赞数 1
分类专栏： uni-app 文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50240716/article/details/122823099
版权

首先在button的点击事件chooseImage中通过uni.chooseImage（{}）上传本地图片，把路径取出来赋值给data中的imgArr
在这里插入图片描述
在这里插入图片描述
再在iamge中，通过v-for来循环imgArr数组，动态绑定src来显示图片。但图片确显示不出来。
在这里插入图片描述

解决方法：

this的指向有问题，在chooseImage事件中，先把this取出来，再进行赋值
在这里插入图片描述

小慈
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
uni-app从入门到实战系列：商城项目练习
11-02
1. 数据绑定：uni-app采用Vue.js的双括号{{ }}进行数据绑定，可以在模板中引用script中的data属性，实现视图与数据的同步。 2. 事件处理：通过v-on指令绑定事件，如`@click`表示点击事件。事件处理函数通常写在...
uni-app前端黑马商城讲解文档
09-02
《uni-app前端黑马商城讲解文档》是一份专为开发者准备的详细教程，旨在深入解析uni-app框架在构建黑马商城项目中的应用。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台的移动应用开发，覆盖了iOS...
uniapp中image src动态引用图片不生效
iOS_MingXing的博客
07-02 1618
uniapp中image src动态引用图片不生效。如此才能正确引用图片。
Uniapp｜image无法显示图片
爱玩的安哥
12-16 8054
自己写自定义组件的时候，找到几个图标，放在项目目录下，但在使用的时候发现小程序里面显示不出来。 微信小程序里面这样： 看网上的文章说要改成绝对路径，但我在在back-audio里面根本就没有发现play.png这个文件，那么怎么改src都不可能显示出来。除非放在static里面，但我想把组件独立出来使用。 无意中看到别人写的自定义组件，里面也有使用图标，试了下，可行！ 图片、图标使用require导入 三个控制播放图标代码： <template> <view class="audi
解决uniapp打包h5后，图片显示不出来的问题
最新发布
weixin_44431073的博客
05-17 549
使用uniapp开发h5页面，发行后，在正式环境中图片加载不出来，但是本地是正常的。在需要使用路径的地方，这样写。
uni-app image引入本地图片不显示，以及如何动态引入本地图片
eren_yeger的博客
05-09 1295
我们在uni-app中使用image标签引入本地图片的时候，会出现引入以后本地图片不显示的情况，这是因为引入的路径不对。在uni-app中使用image 相对路径或者绝对路径必须要加上/才可以。你是不是写成了 status/img/XXX.jpg了呢。动态引入本地图片的话可以使用require，如下。
uniapp的image引用本地图片不显示问题解决
weixin_48046344的博客
12-23 5906
uniapp引用本地图片踩坑
uni-app中动态展示图片
lsklike的博客
08-17 2439
uni-app/vue中images动态展示图片
uniapp中如何使用image图片
精通前端技术，了解后端接口
12-26 4997
当在UniApp中使用图片时，可以通过标签将图片显示在页面上。这个标签可以指定src属性来引用图片，并且可以通过mode属性来设置图片的显示模式。除此之外，还可以利用@click事件来实现图片的点击事件。在编写代码时，要注意引用图片的路径和处理图片的点击事件，以及适配不同屏幕尺寸的情况。UniApp中的图片使用相对简单，下面的博客将详细介绍UniApp中图片的使用方法以及相关注意事项。
uni-app项目练习2
05-16
3. **组件使用**：uni-app提供了丰富的内置组件，如view、text、image、button等，以及一些移动特有的组件，如navigator、swiper、picker等。学习如何在页面中使用这些组件，理解和掌握其属性、事件绑定等。 4. **...
uni-app从0到1.DOC uni-app实现代码
01-10
15. **从本地相册选择图片或使用相机拍照**：讲解如何利用uni-app接口进行图片选取和拍摄。 16. **数据缓存**：使用uni.setStorage和uni.getStorage进行本地数据存储。 17. **设备相关接口**：涵盖获取设备信息、...
uni-app 前后端实战课 - 《悦读》（上）.zip
12-21
2. 页面结构和组件使用：介绍uni-app的基础组件，如view、button、image等，并演示如何组织页面结构。 3. 数据绑定和事件处理：讲解Vue的双括号插值、v-model、v-for指令，以及如何处理用户交互事件。 4. API调用：...
uni-app nvue文件图片无法显示问题
qq_36126031的博客
11-13 587
使用`uni-app`框架开发`app`，在`nvue`文件中使用静态图片，开发环境浏览器运行可展示，发不成`app`后始终无法展示！！！
uniapp选取本地资源(图片,视频,文件)
m0_67388537的博客
07-19 5424
current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考。1.9.5+ 支持传图片在 urls 中的索引值。，其中 B1 与 B2 的图片链接是一样的。从本地相册选择图片或使用相机拍照。拍摄或从手机相册中选择图片或视频。
uniapp动态绑定图片路径打包后图片资源获取失败的问题
mini_1251861209的博客
01-05 5885
类似于vue，uniapp中的图片路径要么就直接写进标签中，例如： <img class="banner_img" src="../../static/img/1002.png"></img> 这时，相对路径或者绝对路径都可以使用 但是如果要动态绑定图片路径，使用相对路径之后打包出来就会报找不到资源的错误，这时有两种解决方案： 一、使用require先将图片资源当成模块引入到页面中，再调用（不推荐） <img class="header-banner-img" :
uniapp引入本地图片
热门推荐
Qing_X_C的博客
07-31 1万+
注意使用相对路径，需要require <image class="" mode="aspectFill" :lazy-load="true" :src="require('./img/beauty.png')" />
uniapp——显示不了网络图片或者本地图片
wy313622821的博客
02-27 8095
1、显示不了网络图片 有一些网络的图片在PC段能正常显示，但是在手机上显示不了的问题，解决办法： 直接在原图链接前拼接https://images.weserv.nl/?url= 例如： <image mode="widthFix" src="https://images.weserv.nl/?url=https://wx1.sinaimg.cn/mw2000/006Z6VeYly8fl0aq020yjj30ku0ktdha.jpg" @error="imageError"></
image vb6 图片自适应_uniapp 动态绑定背景图片
weixin_39959794的博客
11-22 351
动态绑定主要与data有关上代码：<template>:<view class="topimage" :style="{backgroundImage:'url('+imagesrc+')'}"></view><script>:data() { return { imagesrc: '../../static/image/header.png' ...
uni-app动态引入图片
前端
09-16 7987
正确写法1 <image :src="getsrc(url)"></image> getsrc (url) { return '/static/images/faces/' + url; } 正确写法2(推荐) <image :src="'/static/images/faces/' + url"></image> 切记: uni-app是支持动态拼接的, 也支持base64拼接(你拼错了) 别喝其他的毒汤. 切记: 拼接路径一定是static文件
uni-app 图片放大
03-06
在uni-app中实现图片放大功能可以通过以下步骤进行： 1. 首先，在uni-app的页面中引入需要放大的图片组件，例如使用`<image>`标签来展示图片。 2. 在需要放大的图片上添加点击事件，可以使用`@tap`或者`@click`等事件绑定方式。 3. 在点击事件的处理函数中，可以通过uni-app提供的API来实现图片放大的效果。一种常用的方式是使用uni-app的原生弹窗组件`uni.showPreviewImage`来展示放大后的图片。 下面是一个示例代码： ```html <template> <view> <image src="/static/image.jpg" @tap="showImage"></image> </view> </template> <script> export default { methods: { showImage() { uni.showPreviewImage({ urls: ['/static/image.jpg'], current: '/static/image.jpg' }); } } } </script> ``` 在上述示例中，我们在`<image>`标签上添加了点击事件`@tap="showImage"`，当用户点击图片时，会触发`showImage`方法。在`showImage`方法中，我们使用`uni.showPreviewImage`来展示放大后的图片，其中`urls`参数是一个数组，用于指定需要展示的图片列表，`current`参数用于指定当前需要展示的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值