【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.mzph.cn/diannao/53934.shtml

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

相关文章

Hadoop林子雨安装

文章目录 hadoop安装教程注意事项&#xff1a; hadoop安装教程 链接: 安装教程 注意事项&#xff1a; 可以先安装ububtu增强功能&#xff0c;完成共享粘贴板和共享文件夹 ubuntu增强功能 2.这里就可以使用共享文件夹 或者在虚拟机浏览器&#xff0c;用 微信文件传输助手 传文…

[网络]TCP/IP五层协议之应用层,传输层(1)

文章目录 一. 应用层二. 传输层端口号传输层的协议UDPTCPTCP报头TCP协议的核心机制 一. 应用层 应用层是和应用程序直接相关, 和程序猿打交道最多的一层 应用层协议, 里面描述的内容, 就是你写的程序, 通过网络具体按照啥样的形式来传输数据 不同的应用程序, 就可以用不同的应…

心觉:以终为始,帮你精准实现目标

Hi&#xff0c;我是心觉&#xff0c;与你一起玩转潜意识、脑波音乐和吸引力法则&#xff0c;轻松掌控自己的人生&#xff01; 挑战每日一省写作169/1000天 假设你的目标是 一年内赚到150万。我们可以通过“以终为始”和“以始为终”的结合来帮助你实现这个目标 以下是完整的…

写论文还在卡壳?教你用ChatGPT轻松搞定过渡段落!

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 在写论文的路上&#xff0c;最让人头疼的除了查重率飙升&#xff0c;估计就是文献综述了吧&#xff01; 想想看&#xff0c;文献一篇接着一篇&#xff0c;脑子都快炸了&#xff0c;还得想办法把它们连接得…

vue2实践:el-table实现由用户自己添加删除行数的动态表格

需求 项目中需要提供一个动态表单&#xff0c;如图&#xff1a; 当我点击添加时&#xff0c;便添加一行&#xff1b;点击右边的删除时&#xff0c;便删除这一行。 至少要有一行数据&#xff0c;但是没有上限。 思路 这种每一行的数据固定&#xff0c;但是不定行数的&#x…

2024.9.14(RC和RS)

一、replicationcontroller &#xff08;RC&#xff09; 1、更改镜像站 [rootk8s-master ~]# vim /etc/docker/daemon.json {"registry-mirrors": ["https://do.nark.eu.org","https://dc.j8.work","https://docker.m.daocloud.io",&…

【Kubernetes】linux centos安装部署Kubernetes集群

【Kubernetes】centos安装Kubernetes集群 1、环境准备 系统centos7 配置yum源参考文章 Centos系统换yum源 yum -y update 步骤1-3是所有主机都要配置&#xff0c;主机名和hosts配置完后可以使用工具命令同步 1.1 主机 一主二从 主机名ipk8smaster192.168.59.148k8snode11…

git 更新LingDongGui问题解决

今天重新更新灵动gui的代码&#xff0c;以便使用最新的arm-2d&#xff0c;本来以为是比较简单的一件事情&#xff08;因为以前已经更新过一次&#xff09;&#xff0c;却搞了大半天&#xff0c;折腾不易啊&#xff0c;简单记录下来&#xff0c;有同样遇到问题的同学参考&#x…

Maven私服Nexus安装及使用

前言 周末在家闲着无聊&#xff0c;不知道做点啥&#xff0c;就想着自己搭建一个Maven私服来玩玩。刚好使用自己之前在电脑上搭建的虚拟机服务器来操作体验了一把。搭建好私服后&#xff0c;以后自己写的一些小模块啊&#xff0c;工具包啥的就可以发布到自己的私服上了&#xf…

时序预测 | Matlab实现PSO-CNN粒子群优化卷积神经网络时间序列预测

时序预测 | Matlab实现PSO-CNN粒子群优化卷积神经网络时间序列预测 目录 时序预测 | Matlab实现PSO-CNN粒子群优化卷积神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现PSO-CNN粒子群优化卷积神经网络时间序列预测&#xff08;完整源码和数…

yml在线格式转换工具(properties)

网站地址&#xff1a; 在线yaml转properties-在线properties转yaml-ToYaml.com yml&#xff0c;即yaml文本格式文件的后缀名&#xff0c;yaml可以用来替代properties&#xff0c;配置文件短的情况下可读性更好一些。 但是Spring Boot项目配置项多&#xff0c;yml文件看起来不…

LabVIEW编程语言出于什么原因开发的?

LabVIEW最初由美国国家仪器公司&#xff08;NI&#xff09;于1986年开发&#xff0c;目的是为工程师和科学家提供一种图形化编程环境&#xff0c;简化数据采集、仪器控制、自动化测试和测量系统开发等工作。开发LabVIEW的主要原因包括以下几点&#xff1a; 简化复杂系统开发&am…

哈工大“计算机设计与实践”(cpu)处理器实验设计报告

哈工大“计算机设计与实践”&#xff08;cpu&#xff09;处理器实验设计报告 【哈工大“计算机设计与实践”&#xff08;cpu&#xff09;处理器实验设计报告】 在计算机科学领域&#xff0c;CPU&#xff08;中央处理器&#xff09;是计算机系统的核心部件&#xff0c;负责执行指…

91、K8s之ingress上集

一、Ingress service模式&#xff1a; loadbalance NodePort&#xff1a;每个节点都会有一个指定的端口 30000-32767 内网 clusterip&#xff1a;默认模式&#xff0c;只能pod内部访问 externalName&#xff1a;需要dns提供域名 1.1、对外提供服务的ingress service&…

SQL Server小技巧之遍历日期

使用背景 一般项目中会遇到&#xff0c;求每日的日报这种&#xff0c;以及计算2个日期内的工作日&#xff0c;或者休息日可能会用到&#xff0c;计算休息日可以用额外的一个字段用来标记当前日期是否是休息日 遍历方式一 DECLARE StartDate DATE 2023-01-01, EndDate DATE …

jmeter之TPS计算公式

需求&#xff1a; 如何确定环境当中的TPS指标 PV:&#xff08;Page View&#xff09;即页面访问量&#xff0c;每打开一次页面PV计数1&#xff0c;刷新页面也是。PV只统计页面访问次 数。 UV(Unique Visitor),唯一访问用户数&#xff0c;用来衡量真实访问网站的用户数量。 一般…

携手鲲鹏,长亮科技加速银行核心系统升级

新经济周期下&#xff0c;银行净息差持续收窄、盈利压力加大、市场竞争日趋加剧。同时&#xff0c;国家相关政策不断出台&#xff0c;对金融科技的自主创新与安全可控提出了更高要求。 在这样的大背景下&#xff0c;银行业的数字化转型已经步入深水区。其中&#xff0c;核心系统…

appium server gui详细按照步骤

1.安装appium server desktop Appium安装提供两种方式:桌面版和命令行版。其中桌面版又分为 Appium GuI 和 Appium Desktop 。作为初学者&#xff0c;用桌面版&#xff0c;对初学者比较友好。 官网下载地址&#xff1a;Releases appium/appium-desktop GitHubTags appium/…

OpenCV class2-C#+winfrom显示控件使用窗口大小并内存管理

一.控件效果说明 二.代码声明&#xff08;已经循环读取10000次&#xff09; 全局 OpenCvSharp.Point point new OpenCvSharp.Point(0, 0); OpenCvSharp.Size size2; Mat src new Mat(); 初始化 size2 new OpenCvSharp.Size(pictureBox1.Size.Width, pictureBox1.Size.Hei…

MySQL迁移达梦报错,DMException: 第1 行附近出现错误: 无效的表或视图名[ACT_GE_PROPERTY]

达梦数据库选好模式和登录用户&#xff0c;迁移时的目标模式名要和达梦的当前登录的用户名相同&#xff0c;否则查询的时候需要“form 模式名.表名”&#xff0c;只from表名就会报表不存在的错误。