当前位置: 首页 > news >正文

【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 赋予合适的初始值,这些初始值就会展示在界面上

相关文章:

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

一、问题 media 的saved 数组中的图片使用的是location 相对路径&#xff0c;但是我的业务需要直接根据图片链接展示图片&#xff0c;而且用的也不是location 相关源代码 <div v-for"(image, index) in savedMedia" :key"index" class"mu-image-…...

linux第一课(操作系统核心)

一.关于linux (1)linux是一款开源的操作系统(是多用户&#xff0c;多任务&#xff0c;多线程)。 (2)一般所说的linux指的是linux核心&#xff0c;即对计算机硬件资源负责调度管理&#xff0c;主要职责是进程管理&#xff0c;内存管理文件系统&#xff0c;设备驱动&#xff0c…...

【期末复习】软件项目管理

前言&#xff1a; 关于软件项目管理这一科目的重要期末考点&#xff0c;希望对你有帮助。 目录 质量管理可能遇到的问题 软件项目质量管理 软件项目风险管理 进度 题1 题2 题3 成本 题1 题2 题3 质量管理可能遇到的问题 (1)没有制定质量管理计划&#xff1a; (2)…...

C# List定义和常用方法

栏目总目录 List的定义 列表&#xff08;List&#xff09;是一种常用的集合类型&#xff0c;它属于System.Collections.Generic命名空间。列表是一个有序集合&#xff0c;可以包含重复的元素&#xff0c;并且可以根据索引访问元素。 List< T > List<T> 是一个泛…...

如何在实际应用中更好地利用字典功能提高开发效率?

在当今数字化浪潮汹涌澎湃、技术迭代日新月异的时代&#xff0c;企业和开发者们犹如在信息的海洋中航行&#xff0c;迫切需要高效便捷的开发工具来指引方向、加速前行。开发工具的优劣直接关系到项目的进度、质量以及最终的商业价值实现。在众多开发工具的功能模块中&#xff0…...

Windows 环境下 vscode 配置 C/C++ 环境

vscode Visual Studio Code&#xff08;简称 VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。它支持多种编程语言&#xff0c;并提供了代码高亮、智能代码补全、代码重构、调试等功能&#xff0c;非常适合开发者使用。VSCode 通过安装扩展&#xff08;Extension…...

[通信原理]绪论2:信息量 × 信息熵

我们知道信息是一个抽象的概念&#xff0c;它既不是物质也不是能量。那么我们要如何对一个抽象的概念进行一个定量的研究呢&#xff1f; 信息量 1、信息的度量 通信的本质是传递信息&#xff0c;为了定量表征信息的度量&#xff0c;引入信息量的概念。消息中所含信息量与其不…...

TCP套接字【网络】

文章目录 代码 创建套接字&#xff1a;&#xff08;TCP/UDP) int socket(int domain, int type, int protocol);inet_aton&#xff0c;将字符串IP转换成整数IP int inet_aton(const char *cp, struct in_addr *inp);监听套接字&#xff1a;&#xff08;TCP&#xff0c;服务器…...

【devops】devops-git之github使用

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…...

GPT对话知识库——串口通信的数据的组成?起始位是高电平还是低电平?如何用代码在 FreeRTOS 中实现串口通信吗?如何处理串口通信中的数据帧校验吗?

目录 1&#xff0c;问&#xff1a; 1&#xff0c;答&#xff1a; 串口数据的组成 串口数据传输帧的完整结构 起始位的电平状态&#xff1a;低电平 举例&#xff1a;UART数据传输的例子 适用场景 总结 2&#xff0c;问&#xff1a; 2&#xff0c;答&#xff1a; a. 如…...

从头开始学MyBatis—02基于xml和注解分别实现的增删改查

首先介绍此次使用的数据库结构&#xff0c;然后引出注意事项。 通过基于xml和基于注解的方式分别实现了增删改查&#xff0c;还有获取参数值、返回值的不同类型对比&#xff0c;帮助大家一次性掌握两种代码编写能力。 目录 数据库 数据库表 实体类 对应的实体类如下&#x…...

AI音乐创作的新时代:从创意到旋律的智能化转型

文章目录 &#x1f3bc; AI音乐创作的新时代&#xff1a;从创意到旋律的智能化转型1 AI在音乐创作中的应用1.1 AI如何生成音乐&#xff1f; 2 常见的AI音乐创作工具2.1 AIVA2.2 Ecrett Music2.3 Jukedeck 3 AI音乐创作的流程3.1 第一步&#xff1a;确定音乐风格和情感基调3.2 第…...

Spring Boot集成Akka remoting快速入门Demo

1.什么是Akka remoting&#xff1f; Akka-Remoting一种ActorSystem之间Actor对Actor点对点的沟通协议.通过Akka-Remoting来实现一个ActorSystem中的一个Actor与另一个ActorSystem中的另一个Actor之间的沟通 Akka Remoting限制&#xff1a; 不支持NAT&#xff08;Network Add…...

JVM 调优篇7 调优案例1-堆空间的优化解决

一 jvm优化 1.1 优化实施步骤* 1)减少使用全局变量和大对象&#xff1b; 2)调整新生代的大小到最合适&#xff1b; 3)设置老年代的大小为最合适&#xff1b; 4)选择合适的GC收集器&#xff1b; 1.2 关于GC优化原则 多数的Java应用不需要在服务器上进行GC优化&#xff1…...

文件格式转换:EXCEL和CSV文件格式互相转换

目录 1.EXCEl和CSV文件格式互相转换1.1首先安装所需的Python包1.2excel转换为csv代码如下:1.3csv转换为excel代码如下:由于excel文件在数学建模数据处理当中的局限性,我们通常把excel文件转换为csv文件来处理,下面是相关的代码,我直接封装成函数,你们直接调用即可,我会添…...

基于协同过滤的北京森林公园推荐---附源码74454

摘要 本论文主要论述了如何基于协同过滤开发一个北京森林公园推荐&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;通过爬虫技术对北京森林公园的景点信息数据进行爬取&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述北京森…...

002 JavaClent操作RabbitMQ

Java Client操作RabbitMQ 文章目录 Java Client操作RabbitMQ1.pom依赖2.连接工具类3.简单模式4.工作队列模式&#xff08;work&#xff09;公平调度示例 5.发布/订阅模式&#xff08;fanout&#xff09;交换机绑定示例代码 6.路由模式&#xff08;direct&#xff09;7.Topic匹配…...

lablelme标注的数据转成YOLO v8 格式

1 labelme 转 yolov8 格式 import json import cv2 import numpy as np import os def json2yolo(path):# dic{N_shaoxi:0, N_qiaoqi:1, N_qiaojie:2, N_pianyi:3, N_yiwu: 4, \# NV_shaoxi: 5, NV_qiaoqi: 6, NV_qiaojie: 7, NV_pianyi: 8, NV_yiwu: 9,\# …...

【linux】cat 命令

cat 命令是 Linux 和 Unix 系统中非常基础且常用的一个命令&#xff0c;它的全称是 "concatenate" 的缩写&#xff0c;意为“连接”或“串联”。尽管名字听起来像是专门用于连接文件的&#xff0c;但 cat 命令的用途远不止于此。它主要用于查看、创建、合并文件内容&…...

速通sass基础语法

速通Sass语法&#xff1a; sass的特点&#xff1a; 由于css的缺陷&#xff1a;无法自定义变量&#xff0c;不可引用&#xff0c;嵌套等。sass/scss/less等css预处理器产生。以sass为例&#xff0c;引入了变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等诸多功能。方便…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

GraphRAG优化新思路-开源的ROGRAG框架

目前的如微软开源的GraphRAG的工作流程都较为复杂&#xff0c;难以孤立地评估各个组件的贡献&#xff0c;传统的检索方法在处理复杂推理任务时可能不够有效&#xff0c;特别是在需要理解实体间关系或多跳知识的情况下。先说结论&#xff0c;看完后感觉这个框架性能上不会比Grap…...

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

【Vue】scoped+组件通信+props校验

【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性&#xff0c; 令样式只作用于当前组件的标签 作用&#xff1a;防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...