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

Question

大家好，被一个问题困扰很久了，新手小白的毕业课题，实在找不到解决办法，来这里求助一下
前端使用Vue，后端用Springboot，其实就是调用一个工业相机，前端按拍照之后会在本地的c盘中生成一张JPG图片，在开发环境下是可以找到c盘下这张图片（相机调试框内）并且自动刷新的，但是用webPack打包之后前端就只显示打包好的img文件下内的已经缓存好的图片，其中前端是用nginx部署的，后端直接启动jar包。

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

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

小白在此谢过大家！~

题目描述

题目来源及自己的思路

相关代码

粘贴代码文本（请勿用截图）

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

Answer 1

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

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

location /staticFile/ {
    alias C:/test/;
}

Answer 2

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

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

Answer 3

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

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