给uniapp的扩展组件uni-file-picker设置默认显示的图片

官方给出的代码如下所示,但是按照官网给出的代码图片并没有显示出来。

<template><uni-file-picker readonly :value="fileLists" :imageStyles="imageStyles" file-mediatype="image"></uni-file-picker>
</template><script>export default {data() {return {imageStyles: {width: 64,height: 64,border: {radius: '50%'}},listStyles: {// 是否显示边框border: true,// 是否显示分隔线dividline: true,// 线条样式borderStyle: {width: 1,color: 'blue',style: 'dashed',radius: 2}},fileLists: [{url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',extname: 'png',name: 'shuijiao.png'}, {url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',extname: 'png',name: 'uniapp-logo.png'}, {url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',extname: 'png',name: 'shuijiao.png'}]}},methods: {}}
</script>

解决方法:

将以上代码中的 :value = "fileLists" 修改为 v-model = "fileLists"即可。

注意:

  • fileLists中每一项的 url、extname、name 三个属性是必须要写的,否则会影响组件的显示。
  • 其中url的值不能为本地图片的路径。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/17754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

四川农业大学Java实训项目圆满收官,汇智知了堂引领学子实践创新

近日&#xff0c;四川农业大学与汇智知了堂共同举办的Java实训项目正式迎来了项目汇报阶段。本次实训是汇智知了堂在高等教育领域深化校企合作、推动产教融合的一次重要实践&#xff0c;旨在为广大学子提供一个将理论知识与实际操作相结合的平台。 在实训过程中&#xff0c;汇…

selenium源码学习

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

vr数字成果展在线展示突破用户传统认知

想要轻松搭建一个充满互动与创意的3D数字展厅吗?vr互动数字展厅搭建编辑器将是您的不二之选!华锐视点3D云展平台提供的vr互动数字展厅搭建编辑器将空间重建与互动制作完美结合&#xff0c;让您轻松实现3D空间的搭建与互动营销制作。 在vr互动数字展厅搭建编辑器的帮助下&#…

牛客题霸-SQL大厂面试真题(一)

本文基于前段时间学习总结的 MySQL 相关的查询语法&#xff0c;在牛客网找了相应的 MySQL 题目进行练习&#xff0c;以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代码与示例输出。 以下内容是…

抖店类目错放怎么办?怎么改类目?快速解决抖店类目错放问题

大家好&#xff0c;我是电商花花。 我们运营抖音小店的时候&#xff0c;都知道不要放错类目&#xff0c;也知道放错类目的后果&#xff0c;类目错放可能导致商品无法在正确的类目中展示&#xff0c;从而影响到商品的一个曝光率。 严重的话还被平台扣分&#xff0c;扣保证金&a…

隐藏服务器源IP怎么操作,看这一篇学会!

在当今的网络环境中&#xff0c;服务器作为信息和服务的中枢&#xff0c;常驻于公网之上&#xff0c;面临着各式各样的安全威胁&#xff0c;其中&#xff0c;分布式拒绝服务&#xff08;DDoS&#xff09;攻击尤为猖獗&#xff0c;它通过协调大量计算机同时向目标服务器发送请求…

JAVA开发面试超详细

一、Java 基础 1.JDK 和 JRE 有什么区别&#xff1f; jdk&#xff1a;java development kit jre&#xff1a;java runtime Environment jdk是面向开发人员的&#xff0c;是开发工具包&#xff0c;包括开发人员需要用到的一些类。 jre是java运行时环境&#xff0c;包括java虚拟机…

Selenium探险家:驾驭Web自动化的秘籍与实战

Hi&#xff0c;我是阿佑&#xff0c;今天将带大伙们学会如何使用Selenium进行高效的网站测试&#xff0c;如何配置Selenium Grid实现分布式测试&#xff0c;以及如何预测和拥抱自动化测试的未来&#xff01; 文章目录 1. 引言2. 背景介绍2.1 Selenium概览2.2 Python与Selenium的…

python数据可视化:自定义闭合区域填充颜色matplotlib.pyplot.fill()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 python数据可视化&#xff1a; 自定义闭合区域填充颜色 matplotlib.pyplot.fill() [太阳]选择题 以下关于matplotlib.pyplot.fill()函数说法正确的是&#xff1f; import matplotlib.pyplo…

【ARM+Codesys案例】T3/RK3568/树莓派+Codesys锂电叠片机方案:结合CODESYS实现高效生产

锂电叠片机解决方案 乘风破浪&#xff0c;促进新能源行业发展 锂电池是依靠锂离子在正极与负极之间移动来达到充放电目的的一种可充电电池&#xff0c;具有高能量密度、高电压、寿命长、无记忆效应等优点。锂电池属于国家政策扶持的高速发展行业&#xff0c;近年发展快速&…

【Beyond Compare】专业的文件对比工具

一、Beyond Compare官方下载 二、Beyond Compare简介 三、Beyond Compare 4激活 一、Beyond Compare官方下载 Beyond Compare官方下载 https://www.beyondcompare.cc/ Beyond Compare 4中文包 链接&#xff1a;https://pan.baidu.com/s/14igdUm0Xy7DFp4Jzb58AZg?pwdGLNG 提…

newinit.sh挖矿攻击处理与规避方案

目录 攻击分析 恢复措施&#xff1a; 问题排查 攻击入口分析 预防 临时处理方案&#xff1a; 攻击分析 攻击者&#xff1a;职业黑客&#xff08;99%&#xff09; 攻击方式&#xff1a;挖矿病毒newinit.sh和蠕虫病毒pnscan 中毒现象: 服务器负载异常&#xff0c;具体表…

CTFHUB技能树——SSRF(一)

目录 一、SSRF(服务器端请求伪造) 漏洞产生原理: 漏洞一般存在于 产生SSRF漏洞的函数&#xff08;PHP&#xff09;&#xff1a; 发现SSRF漏洞时&#xff1a; SSRF危害&#xff1a; SSRF漏洞利用手段&#xff1a; SSRF绕过方法&#xff1a; 二、CTFHUB技能树 SSRF 1.Ht…

oracle 12c GI卸载流程

集群节点停止服务 [crsctl stop crs -f grid运行deinstall [rootprimary1 bin]# su - grid [gridprimary1 ~]$ cd $ORACLE_HOME/deinstall [gridprimary1 deinstall]$ ls bootstrap_files.lst bootstrap.pl deinstall deinstall.pl deinstall.xml jlib readme.txt …

多张图片上传、图片回显、url路径转成File文件

1. 实现 背景&#xff1a;在表单中使用element-plus实现多张图片上传(限制最多10张)&#xff0c;因为还要与其他参数一起上传&#xff0c;所以使用formData格式。 编辑表单回显时得到的是图片路径数组&#xff0c;上传的格式是File&#xff0c;所以要进行一次转换。 <tem…

超频是什么意思?超频的好处和坏处

你是否曾经听说过超频&#xff1f;在电脑爱好者的圈子里&#xff0c;这个词似乎非常熟悉&#xff0c;但对很多普通用户来说&#xff0c;它可能还是一个神秘而陌生的存在。 电脑超频是什么意思 电脑超频&#xff08;Overclocking&#xff09;&#xff0c;顾名思义&#xff0c;是…

堆排序和Topk问题

堆排序 堆排序即利用堆的思想来进行排序&#xff0c; 总共分为两个步骤&#xff1a; 1. 建堆 升序&#xff1a;建大堆&#xff1b; 降序&#xff1a;建小堆 2 .利用堆删除思想来进行排序 利用堆删除思想来进行排序 建堆和堆删除中都用到了向下调整&#xff0c;因此掌握了…

外卖系统关于redis使用解决高并发情况

1、如何配置redis 在java中操作redis 操作步骤&#xff1a; 1、导入Spring Data Redis的maven坐标 2、配置Redis数据源 3、编写配置类&#xff0c;创建RedisTemplate对象 4、通过RedisTemplate对象操作Redis 2、Redis结合Lua脚本 减少网络开销&#xff1a;使用Lua脚本&#xf…

中医理疗元宇宙 科技赋能中医药产业走向国际市场

基于380亿参数量&#xff0c;对中医药海量文本进行数据训练&#xff0c;实现方剂优化、机制阐释和新适应症的精准发现……日前在天津召开的数智赋能大健康产业新质生产力暨第四届中医药国际发展大会上&#xff0c;由天士力医药集团与华为云共同开发的“数智本草”中医药大模型正…

37. 解数独 - 力扣(LeetCode)

基础知识要求&#xff1a; Java&#xff1a; 方法、for循环、if else语句、数组 Python&#xff1a; 方法、for循环、if else语句、列表 题目&#xff1a; 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行…