vue2项目中使用本机图片的一些问题

news2024/11/24 3:58:43

前后端分离项目,(vue2+springboot2.6.3)

前端上传图片,后端将图片保存在本地。当前端使用上传的图片时出现的一些问题说明。

前端上传图片文件,后端接收到图片文件后将图片保存到vue项目的src/assets/club目录下,如下图所示。
在这里插入图片描述
图片地址在数据库表中的存储为@/assets/club/2023-04-23/1682216045215shoot.jpg。后续前端请求图片时后端返回的图片地址就是数据库存储的。

vue组件中使用图片地址时出现的问题如下:

imgUrl:“@/assets/club/2023-04-23/1682216045215shoot.jpg”
imgUrl的值是后端从数据库返回的数据。

第一种 <img :src="ImgUrl" alt="">

报错信息如下:
在这里插入图片描述

第二种 <img src=" ${imgUrl}" />

其中${imgUrl}为反引号``
报错信息如下:
在这里插入图片描述

第三种 <img :src="require(imgUrl)" />

报错信息如下:
在这里插入图片描述

第四种 <img :src="@/assets/club/${imgUrl.substring(14)}" alt="" />

报错信息如下:
在这里插入图片描述

正确写法 <img :src="require(@/assets/club/${item.cover.substring(14)})" alt="" />

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

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

相关文章

VMware vSphere Replication 8.7 (for vSphere 8.0U1) - 虚拟机复制和数据保护

请访问原文链接&#xff1a;https://sysin.org/blog/vmware-vsphere-replication-8/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 新增功能 vSphere Replication 8.7 | 2023 年 4 月 18 日 | 内部版本 21591677 vSphere Re…

GPT4.0+Midjourney=最佳组合,简单玩法

以下是我设计的一个简单的组合玩法&#xff0c;操作如下&#xff1a; 问gpt4: Here is a MidJourney Prompt Formula: A detailed image of [Subject] [doing something interesting] during [time of day], taken with a [type of camera], using [type of lens] with cinema…

ChatGPT会对我们日常生活带来什么影响?这些技术会改变我们学习阅读工作方式吗?

ChatGPT会对我们日常生活带来什么影响&#xff1f;这些技术会改变我们学习阅读工作方式吗&#xff1f; AI 这个话题很火&#xff0c;我也一直在关注着&#xff0c;很多人甚至觉得 AI 会改变世界&#xff0c;也许你会好奇&#xff1a;ChatGPT 会在三年内终结编程吗&#xff1f;A…

基于gitlab搭建Drone CI

drone简介&#xff1a; drone官方文档&#xff1a;https://docs.drone.io/ drone跟Jenkins一样&#xff0c;可实现持续集成&#xff0c;就是可以帮助我们解决重复的代码构建&#xff0c;自动化测试&#xff0c;发布等重复劳动&#xff0c;通过简单一个提交代码的动作&#xff…

Text-to-3D 任务论文笔记: Latent NeRF

文章目录 概述相关工作3D形状合成使用2D监督的text-to-3D 任务 方法前置知识LDMScore Distillation Latent NeRF文本引导RGB refinementSketch-Shape Guidance对于显式形状的Latent-Paint 实验实验细节文本引导的生成RGB RefinementTextual-Inversion Sketch-Shape GuidanceLat…

使用Handler创建一个Android秒表应用

0、应用是一个有活动、布局和其他资源组成的集合。其中一个活动是应用的主活动。每个应用都有一个主活动&#xff0c;在文件AndroidManifest.xml中指定。 1、默认地&#xff0c;每个应用都在自己的进程中运行。这样有助于保证应用安全。 2、但是可以使用startActivity(intent)传…

信息安全支撑技术

信息安全支撑技术 密码学密码学发展古典密码近代密码学现代密码学 基本保密通信模型密码系统的安全性密码学技术在信息安全中的应用对称密码算法非对称密码算法其他密码服务哈希函数消息认证码数字签名 公钥基础设施&#xff08;PKI&#xff09;CA&#xff1a;认证权威RA&#…

九耶丨阁瑞钛伦特-SpringCloud(六)

Spring Cloud Config 是一个基于 Spring Boot 实现的分布式配置管理工具&#xff0c;它专注于管理各种环境中的应用程序配置&#xff0c;例如开发环境、测试环境和生产环境等。它提供了一个集中的配置服务器&#xff0c;允许在运行时动态地管理和更新应用程序的配置信息&#x…

10 个超赞的 C 语言开源项目

今天给大家分享10个超赞的C语言开源项目&#xff0c;希望这些内容能对大家有所帮助&#xff01; 01 Webbench Webbench是一个在 Linux 下使用的非常简单的网站压测工具。 它使用fork()模拟多个客户端同时访问我们设定的URL&#xff0c;测试网站在压力下工作的性能。 最多可以…

Unity版本使用情况统计(更新至2023年4月)

本期UWA发布的内容是第十二期Unity版本使用统计&#xff0c;统计周期为2022年11月至2023年4月&#xff0c;数据来源于UWA网站&#xff08;www.uwa4d.com&#xff09;性能诊断提测的项目。希望给Unity开发者提供相关的行业趋势&#xff0c;了解近半年来哪些Unity版本的使用概率更…

Java经典笔试题—day05

Java经典笔试题—day05 &#x1f50e;选择题&#x1f50e;编程题&#x1f95d;统计回文&#x1f95d;连续子数组最大和 &#x1f50e;结尾 &#x1f50e;选择题 (1)下面的程序 编译运行后&#xff0c;在屏幕上显示的结果是&#xff08;&#xff09; public class Test {publi…

使用敏捷开发工具做敏捷需求管理流程

上一篇我们介绍了如何管理产品路线图&#xff0c;这一篇我们介绍下如何管理产品Backlog。 史诗故事通常都是比较大的故事&#xff0c;所以我们需要将史诗故事规划到产品Backlog中&#xff0c;以便让团队在产品Backlog中对史诗故事进行拆分&#xff0c;将其拆解为更小的用户故事…

Kubernetes对象之PersistentVolume,PersistentVolumeClaim和StorageClass

前面我们学习了Kubernetes中的Volume&#xff0c;我们可以发现前文中的Volume&#xff08;无论何种类型&#xff09;和使用它的Pod都是一种静态绑定关系&#xff0c;在Pod定义文件中&#xff0c;同时定义了它使用的Volume。在这种情况下&#xff0c;Volume是Pod的附属品&#x…

linux安装redis服务

linux环境采用centos7 1.下载redis安装包 官网下载地址&#xff1a;https://redis.io/download/ 2.安装redis依赖 yum install -y gcc tcl3.上传安装包并解压 tar -xzf redis-6.2.12.tar.gz4.编译安装 进入目录下并安装 cd redis-6.2.12 make && make install默认…

Python 密码破解指南:15~19

协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【OpenDocCN 饱和式翻译计划】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 收割 SB 的人会被 SB 们封神&#xff0c;试图唤醒 SB 的人是 SB 眼中的 SB。——SB 第三定律 十五、…

基于springboot会员制医疗预约服务管理信息系统

开发技术介绍 Java语言简介 Java是由SUN公司推出&#xff0c;该公司于2010年被oracle公司收购。Java本是印度尼西亚的一个叫做爪洼岛的英文名称&#xff0c;也因此得来java是一杯正冒着热气咖啡的标识。Java语言在移动互联网的大背景下具备了显著的优势和广阔的前景&#xff…

APP多版本并行更新方案

目录 App为什么要更新版本更新类型分析应该如何解决升级样式的收集表结构 App为什么要更新版本 任何一款APP都不可能完美&#xff0c;功能也不可能完善&#xff0c;需要不断迭代更新完善APP。例如&#xff1a;随着业务的不断发展而叠加的功能、产品发展到一定程度需要大改版提升…

【源码解析】Redisson分布式限流器RRateLimiter源码分析

前面已经写了一篇Redisson的分布式限流的使用&#xff0c;Redisson分布式限流的简单实践&#xff0c;对其中的原理很好奇。 一、使用 // 1、 声明一个限流器 RRateLimiter rateLimiter redissonClient.getRateLimiter(key);// 2、 设置速率&#xff0c;5秒中产生3个令牌 rat…

如何把软件从C盘移到D盘?

​为什么要把软件从C盘移到D盘&#xff1f; C盘是安装操作系统的系统分区。虽然很多用户在安装系统的时候会给C盘分配了大量的磁盘空间&#xff0c;但是大多数用户会发现C盘很快就会无缘无故的被占满。这是为什么呢&#xff1f;这主要是由于大多数三方程序默认安装在C盘造成…

安科瑞5G智慧水务能效管理平台在九江环境治理中的应用

摘要&#xff1a;当下&#xff0c;以数字孪生为主的数字技术愈发成熟&#xff0c;为使得长江水环境治理能够“长治久安”&#xff0c;上海院在长江大保护先行先试城市九江城中水环境治理中启用了智慧水务先进理念&#xff0c;搭建了基于数字孪生技术的智慧水务平台。通过数字孪…