请问Vue打包后怎么调用本地磁盘的图片呢?或者说怎么自动刷新图片呢?

大家好,被一个问题困扰很久了,新手小白的毕业课题,实在找不到解决办法,来这里求助一下
前端使用Vue,后端用Springboot,其实就是调用一个工业相机,前端按拍照之后会在本地的c盘中生成一张JPG图片,在开发环境下是可以找到c盘下这张图片(相机调试框内)并且自动刷新的,但是用webPack打包之后前端就只显示打包好的img文件下内的已经缓存好的图片,其中前端是用nginx部署的,后端直接启动jar包。
请问Vue打包后怎么调用本地磁盘的图片呢?或者说怎么自动刷新图片呢?
目前vue显示图片的策略就是 “require('C:/test/' + this.picture)” ,读取c盘test文件下拍好的照片,cnpm run serve开发环境下是可以读取到的
请问Vue打包后怎么调用本地磁盘的图片呢?或者说怎么自动刷新图片呢?

我思考过几个解决办法,但依然毫无头绪
1、能不能根据前端根据图片名字(比如1.jpg)反复请求后端上传c盘的图片到服务器,然后再根据url地址刷新这张图片?
2、能不能在nginx中设置,让部署好的前端不读取打好包的dist文件夹内的静态文件img,而读取我主机的c:/test中的图片?

小白在此谢过大家!~

题目描述

题目来源及自己的思路

相关代码

粘贴代码文本(请勿用截图)

你期待的结果是什么?实际看到的错误信息又是什么?


回答:

目前vue显示图片的策略就是 “require('C:/test/' + this.picture)” ,读取c盘test文件下拍好的照片,cnpm run serve开发环境下是可以读取到的

这里不采用这样的方案, 改成 '/staticFile/' + this.picture。嗯就是你的方案二,然后你改nginx,把 /staticFile/ 代理到你的 c 盘

location /staticFile/ {

alias C:/test/;

}


回答:

出于安全考虑,网页是不能读取本地磁盘的,开发时候读取了图片,是因为开发环境启动了一个服务器,图片是由这个服务器读取的。
解决方案:

  1. 可以使用这个接口,但是只有 chrome 支持,并且首次使用需要用户点击确认;
  2. 本地起一个服务器,比如装一个 nginx,但如果是面向 C 端用户的话,这个方法不可取;
  3. 使用 OSS 或由后端提供文件存储,拍照之后把图片上传,读取的时候从指定的 URL 读取;
  4. 如果图片数量不多(或可控),且图片不会过大,可以把图片转成 base64 URL,保存在浏览器自带的数据库 web SQL 或者 indexdDB 中,可以自由读取。


回答:

你这是桌面应用还是web应用?
web应用的话,拍摄的图片,最初是存在应用缓存内

你用磁盘路径,说明拍摄操作不在web前端?那远程操作调用的拍摄动作后,将图片数据重新返给前端吧,可以通过返回同源的图片名称或者直接返回图片文件

以上是 请问Vue打包后怎么调用本地磁盘的图片呢?或者说怎么自动刷新图片呢? 的全部内容, 来源链接: utcz.com/p/935739.html

回到顶部