【vue-media-upload】一个好用的上传图片的组件,注意事项

一、问题

media 的saved 数组中的图片使用的是location + 相对路径,但是我的业务需要直接根据图片链接展示图片,而且用的也不是location

相关源代码

<div v-for="(image, index) in savedMedia" :key="index" class="mu-image-container"><img :src="location +'/'+ image.name" alt=""  class="mu-images-preview"><button @click="removeSavedMedia(index)" class="mu-close-btn" type="button"><svg> ...</svg></button>
</div>

二、解决

下载源代码,修改,作为组件手动导入到项目中使用

  1. 将源代码的 src 文件放置到这个目录
    在这里插入图片描述
  2. 修改导入方式(之前用的是yarn add 安装的,现在我们直接从上面的文件夹中导入)
import Uploader from '@/components/vue-media-upload/src/Uploader.vue';
  1. 修改源代码
    在这里插入图片描述
// 把 local 去除
<div v-for="(image, index) in savedMedia" :key="index" class="mu-image-container"><img :src="image.name" alt=""  class="mu-images-preview"><button @click="removeSavedMedia(index)" class="mu-close-btn" type="button"><svg> ...</svg></button>
</div>

把这个删掉
在这里插入图片描述

三、结果展示

在这里插入图片描述
记得按照自己项目的方式,给 saved 赋予合适的初始值,这些初始值就会展示在界面上

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

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

相关文章

测试ASP.NET Core的WebApi项目调用WebService

虚拟机中部署的匿名访问的WebService&#xff0c;支持简单的加减乘除操作。本文记录在WebApi中调用该WebService的方式。   VS2022创建WebApi项目&#xff0c;然后在解决方案资源管理器的Connected Services节点点右键&#xff0c;选择管理连接的服务菜单。 点击下图圈红处…

Anolis OS 8.8 CentOS8离线安装mysql-8.0.9

下载mysql安装包&#xff1a; mysql下载地址 在Linux系统中&#xff0c;mysql的安装包除了要区分系统和cpu架构之外&#xff0c;还区分安装方式&#xff0c;下载不同的包&#xff0c;安装方式也完全不一样&#xff0c;安装完成后的效果也完全不一样。 我之前下载的包按照官方…

QT Layout布局,隐藏其中的某些部件后,不影响原来的布局

最近在工作时&#xff0c;被要求&#xff0c;需要将布局中的某些部件隐藏后&#xff0c;但不能影响原来的布局。 现在记录解决方案&#xff01; 一、水平布局&#xff08;垂直布局一样&#xff09; ui中的布局 效果&#xff1a; 按钮可以任意隐藏&#xff0c;都不影响其中布…

CCS811二氧化碳传感器详解(STM32)

目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 3.工作原理介绍 三、程序设计 main.c文件 ccs811.h文件 ccs811.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 CCS811模块是一种气体传感器&#xff0c;可以测量环境中TVOC(总挥发性有机物质)浓度和eCO2…

Redis学习——数据不一致怎么办?更新缓存失败了又怎么办?

文章目录 引言正文读写缓存的数据一致性只读缓存的数据一致性删除和修改数据不一致问题操作执行失败导致数据不一致解决办法 多线程访问导致数据不一致问题总结 总结参考信息 引言 最近面试快手的时候被问到了缓存不一致怎么解决&#xff1f;一开始还是很懵的&#xff0c;因为…

关于java同步调用多个接口并返回数据

在现代软件开发中&#xff0c;应用程序经常需要与多个远程API接口进行交互以获取数据。Java作为一种流行的编程语言&#xff0c;提供了多种方式来实现这一需求。本文将探讨如何在Java中同步调用多个API接口&#xff0c;并有效地处理和返回数据。 同步调用的必要性 在某些场景下…

音视频推流中使用wireshark进行抓包分析RTMP

一、前期工作 最近使用开发板采集音视频数据合成FLV流后进行推流到PC端&#xff08;RTMP协议&#xff09;&#xff0c;PC端需要安装对应的nginx以及支持rtmp的nginx&#xff0c;在网上找了教程后安装成功&#xff0c;现在使用wireshark工具对开发板于pc端之间的通信协议进行解析…

【安全系列--处理挖矿】

现象&#xff1a;我们云上waf提示有台服务器存在挖矿行为 解决思路&#xff1a; 1、查看服务器的进程情况 top发现服务的CPU使用率非常高 2、使用性能分析工具perf查看占用的cpu进程 sudo apt install linux-tools-common发现一些kernel进程存在异常 3、使用find查一下这…

Java多线程——模拟接力赛跑

题目&#xff1a; 多人参加1000米接力跑 每人跑100米&#xff0c;换下个选手 每跑10米显示信息 解题思路&#xff1a; 1.必须要用到多线程的锁&#xff0c;否则就会出现三个选手乱跑的情况&#xff0c;我们需要一个一个跑 2.使用给oneRunner上锁的方式更细的控制资源比直接给…

助力汽车半导体产业发展,2025 广州国际新能源汽车功率半导体技术展览会与您相约“羊城”广州

助力汽车半导体产业发展&#xff0c;2025 广州国际新能源汽车功率半导体技术展览会与您相约“羊城”广州 随着半导体技术的升级与发展&#xff0c;功率半导体已经成为推动新能源汽车和智能汽车产业升级的关键因素。汽车不再只是单纯的交通工具&#xff0c;而是逐渐演变为一个智…

【H2O2|全栈】关于CSS(4)CSS基础(四)

目录 CSS基础知识 前言 准备工作 精灵图 概念 属性 案例 浮动 基础属性 清除浮动 案例 预告和回顾 后话 CSS基础知识 前言 本系列博客将分享层叠样式表&#xff08;CSS&#xff09;有关的知识点。 接下来的几期内容相对比较少&#xff0c;主要是对前面的内容进…

[数据集][目标检测]车油口挡板开关闭合检测数据集VOC+YOLO格式138张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;138 标注数量(xml文件个数)&#xff1a;138 标注数量(txt文件个数)&#xff1a;138 标注类别…

Linux相关:在阿里云下载centos系统镜像

文章目录 1、镜像站2、下载方式一2.1、第一步打开镜像站地址2.2 下载地址: https://mirrors.aliyun.com/centos/2.3、选择7版本2.4、镜像文件在isos文件夹中2.5、选择合适的版本 3、下载镜像快捷方式 1、镜像站 阿里云镜像站地址 2、下载方式一 2.1、第一步打开镜像站地址 2…

modbus调试助手/mqtt调试工具/超轻巧物联网组件/多线程实时采集/各种协议支持

一、前言说明 搞物联网开发很多年&#xff0c;用的最多的当属modbus协议&#xff0c;一个稳定好用的物联网组件是物联网平台持续运行多年的基石&#xff0c;所以这个物联网组件从一开始就定位于自研&#xff0c;为了满足各种场景的需求&#xff0c;当然最重要的一点就是大大提…

【程序分享】express 程序:可扩展的高级工作流程,用于更快速的从头算材料建模

分享一个 express 程序&#xff1a;可扩展的高级工作流程&#xff0c;用于更快速的从头算材料建模。 感谢论文的原作者&#xff01; 主要内容 “在这项工作中&#xff0c;我们介绍了一个开源的Julia项目express&#xff0c;这是一个可扩展的、轻量级的、高通量的高级工作流框…

数据驱动型营销与开源 AI 智能名片 O2O 商城系统的融合发展

摘要&#xff1a;本文探讨了数据驱动型营销在现代商业中的重要性&#xff0c;阐述了其在消费者管理和产品管理方面的作用。同时&#xff0c;引入“开源 AI 智能名片 O2O 商城系统”&#xff0c;分析其如何与数据驱动型营销相结合&#xff0c;为企业提供更精准的营销决策和更高效…

Kafka+PostgreSql,构建一个总线服务

之前开发的系统&#xff0c;用到了RabbitMQ和SQL Server作为总线服务的传输层和存储层&#xff0c;最近一直在看Kafka和PostgreSql相关的知识&#xff0c;想着是不是可以把服务总线的技术栈切换到这个上面。今天花了点时间试了试&#xff0c;过程还是比较顺利的&#xff0c;后续…

LineageOS源码下载和编译(Xiaomi Mi 6X,wayne)

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 源码下载 LineageOS官网&#xff1a;https://lineageos.org/ LineageOS源码 github 地址&#xff1a;https://github.com/LineageOS/android LineageOS源码…

创建dataSource错误

说明&#xff1a;记录一次启动项目时的异常&#xff0c;如下&#xff1a; Error starting ApplicationContext. To display the conditions report re-run your application with debug enabled. 2024-09-14 23:27:27.338 ERROR 42260 --- [ main] o.s.boot.SpringA…

leetcode hot100_part4_子串

2024/4/20—4/21 560.和为K的子数组 前缀和哈希表&#xff0c;做二叉树的时候也有这个套路。注意细节&#xff0c;遍历到当前前缀和的时候是先找结果个数还是先加入哈希&#xff1f;应该先找结果个数&#xff0c;不然的话&#xff0c;当前位置也算上了&#xff08;因为是前缀和…