uniapp里面图片直接赋值的语法运行到小程序之后的不兼容问题

唐家堡少主

已于 2023-06-12 15:29:57 修改

阅读量278

点赞数

文章标签： uni-app

于 2023-06-12 15:06:15 首次发布

本文链接：https://blog.csdn.net/tang_tjz/article/details/131169111

版权

文章介绍了两种在VueX中获取数据并应用到组件上的方法。方法一是通过自定义方法从vueX获取数据后设置src。方法二是先在data中定义结构，然后在onLoad生命周期钩子中将vuex中的数据赋值给对应的属性。

摘要由CSDN通过智能技术生成

方法1：从vueX里面取去数据，然后自己写一个方法，通过这个方法给src赋值就可以解决问题

方法2：采用先定义，在赋值的方法

data() {
			return {
			
				userInfo: {
					nickname: '',
					avatar: '',
					mobile: ''
				}
			}
		},
	
		onLoad() {
			this.userInfo = this.$store.state.userInfo;
		},

<view class="mine_top">
			
	<u-avatar size="60" shape="circle" :src="userInfo.avatar"></u-avatar>	
</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

唐家堡少主

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信小程序 |做一款跟ChatGPT下五指棋的小程序

陶人超有料的博客

04-02

3万+

本文基于ChatGPT的语言理解能力，结合时下流行的uniapp框架以及轻量级web框架Flask，从前端到后端，全栈搭建了一个能和chatGPT 这个AI模型进行实时下棋的小程序。项目完整，功能丰富，极力推荐学习！

uni-app 图片滚动查看以及大图循环预览动态赋值src(本地资源以及网络资源均可以) 动态定义高度

授人以渔的博客

06-10

2322

<template> <view> <scroll-view v-if="pics.length>0" :style="{'height':height+'rpx'}" scroll-y="true" class="scroll-Y"> <view v-for="item in pics" :key="item.id"> ...

1 条评论您还未登录，请先登录后发表或查看评论

uniapp微信小程序服务器与行内img src图片路径拼接

Da6668_lei的博客

10-23

4198

uniapp微信小程序服务器与行内img src图片路径拼接 1、在main.js 在行内直接引入运行就可以连接到服务器的图片了

（踩坑）uniapp image 图片不在微信小程序端显示问题

gzj32817的博客

07-26

1164

（踩坑）uniapp image 图片不在微信小程序端显示问题

uni-app 变量赋值后被实时同步

夏已微凉、

02-01

1402

一、场景二、部分代码三、解决方式（深度克隆，深度拷贝）法一：js序列化法二：ES6语法四、他山之石一、场景把登录的用户信息 userInfo，赋值给编辑页面的 infoDetail，v-mode 页面回显 infoDetail.username 修改 infoDetail 的用户名， userInfo的 username 也被修改了二、部分代码 <input class="input" type="text" v-model="infoDetail.username" placeholde.

uniapp开发微信小程序中遇到的坑 image src属性动态绑定base64位图片不显示的问题

CLdemies的博客

05-21

5713

<view class="dataList" v-for="(item,index) in dataList" :key="item.id"> <image mode="left" :src="item.imagePng"> </view> 打印后将后台传过来的base64代码片段放到浏览器中是可以正常显示解析的，在dom树中查看确定src中写入了代码，那么原因就清楚了。 if(item.imagePng){ item.imagePng = item.imageP

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

m0_67266787的博客

02-24

792

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

uni-app黑魔法：小程序自定义组件运行到H5平台

hbcui1984的专栏

03-23

1797

引言移动互联网的初期，囿于设备硬件性能限制，流量以原生App为主，iOS、Android是当时两大平台。随着硬件及OS的更新换代，H5可承载的体验逐步完善，为提高开发效率、节约资源（复用代码）以及热更新等目的，Hybrid模式成为主流；以及轻应用、服务号等平台的助推，H5网页流量暴涨，成为第三大平台。 2017年1月9日，微信发布小程序，历经3年发展，在今年主题为”未完成 Always Bet...

【重点突破】—— UniApp 微信小程序开发官网学习Two

柳柳66的博客

11-28

482

一、使用Vue.js注意事项 Vue.js在uni-app中使用的差异：新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期受限：发布到H5时支持所有vue的语法，在小程序和App端部分功能受限生命周期：Vue实例生命周期+应用生命周期+页面生命周期使用uni-app的onReady ：代替vue的mounted 使用uni-ap...

【uniapp】如何在src中使用插值语法

ONLYSRY的博客

07-27

1509

page3img与page3text的值都是我们这边传过去的。

uni-app编译运行微信小程序，static没有进行编译问题

厚德载物

10-29

2081

uni-app运行编译时，在H5页面，static内容的图片路径没有错，图片不进行加载，同时在微信小程序，static不进行编译等问题。可能的解决办法：当前工程的文件路径出现了类似于()括号等一些特殊字符，直接更换修改工程路径 ...

uniapp+Vue3+Vite 实现动态访问静态图片（含微信小程序端）

我总是词不达意的博客

09-07

3935

uniapp+Vue3+Vite 实现动态访问静态图片（含微信小程序端）

img标签地址src路径拼接_微信小程序中image组件src路径拼接字符串的问题

weixin_36184835的博客

01-27

4758

微信小程序中image组件src路径拼接字符串的问题最近在做微信小程序毕设，涉及到远程图片显示，一开始我是这样写的：index.js文件中onLoad: function () {this.setData({imgurl:app.globalData.imgurl})}index.wxml文件中但是控制台老是报错说找不到本地图片：VM12083:1 Failed to load local ima...

uni-app ＜image＞标签不显示本地图片的坑

m0_50015961的博客

12-12

4957

关键是src的路径如果是页面中直接引用，一切都没问题如果是组件中引用，当src为静态时直接引用组件的相对路径也没问题坑来了：当src为动态引用时，路径一定要改为组件所在页面的相对路径，填坑完毕转载链接：https://blog.csdn.net/Tarzan_Dong/article/details/109297308 ...

uniapp小程序src引用服务器图片时全局变量与图片路径拼接

最新发布

qq_41227106的博客

05-30

748

很明显这种方式小程序是不认的，这就头疼了，还想过另外一个方法就是想vue一样定义全局的store参数进行设置，在页面的js中打印也是一切正常的，但是就是引入到如图上的图片的src就是不行。除了定义js的全局变量，还有定义css的全局变量，uniapp使用的是scss这个css的预处理语法，可以直接在nui.scss文件中定义。理论上，应该在main.js中定义一个全局变量，然后在页面的<image>标签上的是src直接使用即可。看上去挺靠谱的，实际上小程序后台会报一个错。

uniapp开发微信小程序 ，使用本地图片做背景图应该怎么处理

qq_43468165的博客

02-22

2603

注意，把获取可用的base64地址的方法放在computed 里面是非常必要的。如果放在methods里面初次进入这个页面时候会报错（除了首页之外）。这里就是跟methods和computed特性有关。

uni-app 动态绑定图片

weixin_44433499的博客

06-28

9583

动态绑定图片：:src="item.userpic" <image :src="item.userpic" mode="widthFix" lazy-load></image>

微信小程序 - 详细实现＜image＞图片 src 路径动态拼接多个变量，小程序图像 src 路径在模板上进行变量拼接，路径有变量报错如何解决（详细示例代码）

王佳斌

04-30

9179

在微信小程序中对于动态图像 `src` 路径，您无法像正常 `Vue` 项目那样拼接变量路径，这归结于小程序框架底层。但在微信小程序中，您会收到报错提示。核心思路：将一切需要拼接的字符串，转为在 `data` 变量中存储，模板通过 `{{ }}` 进行连接。这种问题有很多解决方案，比如在函数中直接处理好最终图片路径，模板直接使用。本文之所以选择之，是因其 **灵活** 特性，适用于多场景，因为您可以通过 `js` 对其进行动态改变，从而改变视图。

【uniapp】微信小程序 普通图片路径和base64格式图片保存图片到相册

qq_43799363的博客

01-14

1710

【uniapp】微信小程序 普通图片路径和base64格式图片保存图片到相册

uniapp 小程序使用filter也重新赋值了还是不刷新

06-01

在uniapp小程序中，使用filter对数据进行过滤后，如果需要刷新页面显示过滤后的数据，可以通过以下两种方式实现： 1.重新赋值：将过滤后的数据重新赋值给原始数据，这样页面就可以显示过滤后的数据了。示例代码： ``` <template> <view> <input v-model="keyword" placeholder="请输入关键字" /> <view v-for="(item, index) in filterList" :key="index"> {{ item }} </view> </view> </template> <script> export default { data() { return { list: ["苹果", "香蕉", "橘子"], keyword: "", }; }, computed: { filterList() { return this.list.filter((item) => item.toLowerCase().includes(this.keyword.toLowerCase()) ); }, }, }; </script> ``` 2.强制刷新：可以通过给组件添加一个key值来强制刷新组件，这样页面也会显示过滤后的数据。示例代码： ``` <template> <view :key="filterList"> <input v-model="keyword" placeholder="请输入关键字" /> <view v-for="(item, index) in filterList" :key="index"> {{ item }} </view> </view> </template> <script> export default { data() { return { list: ["苹果", "香蕉", "橘子"], keyword: "", }; }, computed: { filterList() { return this.list.filter((item) => item.toLowerCase().includes(this.keyword.toLowerCase()) ); }, }, }; </script> ``` 以上两种方法都可以实现在uniapp小程序中使用filter后刷新页面显示过滤后的数据。