后端图片存储绝对路径，Vue前端展示报错

已于 2022-06-17 17:14:47 修改
阅读量1.5k 收藏 2
点赞数 2
分类专栏： java 文章标签： vue.js 前端 javascript java
于 2022-05-06 10:26:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43359830/article/details/124604090
版权

因为有个EXCEL导出功能，用户需要知道图片在电脑盘符位置，因此数据库不能直接存项目地址，因此想到一个解决办法
在这里插入图片描述
首先在后端指定映射虚拟路径，将盘符路径直接映射到项目路径，用来保证前端vue访问
在这里插入图片描述

这样操作后，数据库字段依然是盘符路径，前端朋友提出用require(‘+图片地址’)可做显示，但是需求是列表显示图片，所以否决了（也可能是自己深度不够），所以在列表渲染时加了个方法
在这里插入图片描述
将文件名拆分出来，重新拼接项目地址字符串
在这里插入图片描述
在这里插入图片描述
渲染成功
注：需注意进方法之前，对值判空，否则可能整个列表数据因为单个空值，全部失效
ps:前端朋友评价歪门邪道，哈哈哈哈哈

技术驱动型懒狗
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue获取上传图片的名字和路径_vue中 iview的upload上传图片 获取本地图片绝对路径 在前端实现图片预览...
weixin_39639653的博客
12-19 1399
在用iview的upload上传图片的时候，想要实现图片的预览。 但是在iview给的例子中，是每上传一个图片触发一次上传事件，调一次接口，后台将图片存入数据库，再回传给前端，这样实现图片在前端的显示。这个方法对于上传多张图片，无疑很不现实。于是就有了下面的方法。想要实现上传多张图片，上传的图依次显示出来，点击提交，实现同时上传，只调一次接口，后台一次性将多张图片存入数据库。在图片上传前 'han...
前端网页上文件以字符串的方式保存和还原
gym_1_2的博客
12-08 573
前端网页上文件以字符串的方式保存和还原
Vue+SpringBoot项目前端如何获取本地磁盘路径的照片
m0_75015491的博客
11-26 1502
今日项目中遇到的问题：在页面想要展示本地磁盘路径的照片，但是一直无法显示出来原因：可能是vue无法直接读取本地磁盘的照片（本人盲猜）
若以框架 vue富文本字符串中获取图片的存储路径
taiguolaotu的博客
06-09 1167
Edit包下增加 以下代码。
vue图片显示
babyzbb636的博客
10-03 2917
最简单的方法是使用<img>标签，并将图片的URL作为src属性的值。如果是绝对路径，需要使用require函数，图片将从提供的URL加载并显示在页面上。
如何在vue项目中使用图片路径
小方块的世界
04-20 2928
问题描述 在img标签中如何引入图片路径 如何动态修改图片地址 在background属性中如何引入图片地址 问题解决 图片目录 - src -- assets --- images 在img标签中直接使用图片 <img src="@/assets/image/banner.png"> 动态改变img标签的地址，比如轮播图： <img :src="imgList[activeIndex]"> getImgList() { let arr = []
【vue显示从后端传过来的图片流】
qq_37634156的博客
02-15 7994
<img :src="codeImg" alt="" /> data()等部分省略，直接看方法 handleImg: function (index) { if (this.dataManage[index].url == null) { this.checkShowImg = true } else { this.showImg = true showImg({ path: this.dataManage[index].url, .
【Vue】v-for循环图片绝对路径，图片无法显示
Owen的博客
10-31 1893
1、src 和 :src <swiper-slide v-for="item of swiperList" :key='item.id'> <img :src="item.srcUrl" /> <!--<img v-bind:src="item.srcUrl" />--> </swiper-slide> 图片循环的时候，要用 :src，是 v-bind:src 的简写形式。 2、第一种情况：如果图片放在 src 文件夹下
vue Img如何显示本地磁盘中的图片文件(不做上传仅做预览)
Aaron
04-14 3996
现在浏览前为了安全已经不提供真实路径了 上传的文件获取到的URL都被替换成了fakepath 解决方案： const _this=this let oFReader = new FileReader() oFReader.readAsDataURL(e.target.files[0]) oFReader.onloadend = function(oFRevent) { console.log(oFRevent.target.r......
vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)
热门推荐
动感超人的博客
08-21 1万+
vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。
后端用java加前端vue搭建的用户管理系统
06-05
后端用java加前端vue搭建的用户管理系统 实现增删改查功能。 文章地址：
vue前端模拟字典处理后端返回数据
04-18
有时候后端返回的数据字段可能是只有1或者2，这种code，没有返回对应的中文，但是前端又要显示中文，于是我就写了一个demo 可进行参考，只是主要处理就是用了js的一些语法，逻辑基本都是一样的，可以参考我这个demo...
校园信息发布系统 vue前端 后端java 一套完整
10-20
校园信息发布系统 vue前端 后端java 一套完整，小白也是一个搬运工，大家互相学习有不对的请联系作者
解决vue单页面应用打包后相对路径、绝对路径相关问题
11-20
在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子...
基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码.zip
10-24
技术栈 后端：java+Spring+SpringMVC+Mybatis 前端：VueJs+Element
vue 动态加载图片路径
岁月如歌去，十年弹指间
05-14 2521
在用vue-cli脚手架生成的vue项目开发中，动态加载图片本地运行没有问题，但是打包后图片无法显示，图片路径404找不到， 相关代码如下： <template> <img :src="signalIconSrc['1']" class="basic-data-icon"> </template> <script> export default { data() { return { ...
VUE怎么动态显示本地文件夹中的图片
tpf1070527713的博客
07-02 7324
需求描述：VUE动态显示本地某一文件夹中的图片 如果我们在项目目录中有一个文件夹，文件夹中有一些图片，我们不知道图片的名字，只知道图片存放的目录，我们想把这些图片展示在VUE页面上，那么我们应该如何实现这个功能呢？ 解决思路： 首先我们需要知道图片的路径，图片的路径是相对路径也可以是绝对路径； 其次我们需要获取到图片的文件名，获取图片文件名我之前的博客中已经有过描述，这里再复习一遍 var requireModule = require.context( "../../assets/Downlo
最简单的方法教你如何使用vue3的el-upload组件上传头像到本地后端（axios的post请求），使用koa-multer把图片存储到自定义位置并且返回图片地址（附带源码）
最新发布
LuMinarY0的博客
01-07 1259
最简单的方法教你如何使用vue3的el-upload组件上传头像到本地后端（axios的post请求），使用koa-multer把图片存储到自定义位置并且返回图片地址（附带源码）
vue根据后端返回的图片浏览地址本地打包（修复篇）
mosansui的博客
06-30 350
主要用到 jszip 和 file-saver! 第一步:下载包! npm install jszip --save npm install file-saver --save 第二步:在需要使用的页面引入包! import JSZip from "jszip"; import FileSaver from "file-saver"; 第三步:先定义一个方法! //定义一个base64打包的方法! packaging(name, baseList, address, num, zipName,
vue从后端拿图片地址显示在前端
06-08
在Vue中从后端获取图片地址并显示在前端可以通过以下步骤实现： 1. 在Vue组件中定义一个data属性来存储后端返回的图片地址，例如： ``` <template> <div> <img :src="imageUrl" alt="图片"> </div> </template> <script> export default { data() { return { imageUrl: '' } }, methods: { getImage() { // 在这里发送请求到后端获取图片地址 // 假设返回的数据格式为{imageUrl: 'http://example.com/image.jpg'} axios.get('/api/getImage').then(response => { this.imageUrl = response.data.imageUrl }) } }, mounted() { this.getImage() } } </script> ``` 2. 在Vue组件中使用`<img>`标签来显示图片，通过`:src`绑定`imageUrl`属性来动态更新图片地址。 3. 在Vue组件的`mounted`生命周期钩子函数中调用`getImage`方法来发送请求获取图片地址并更新`imageUrl`属性。 注意：在上述代码中，我使用了axios库来发送请求。如果你使用其他库或者原生的XMLHttpRequest对象发送请求，代码实现方式可能会有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值