前言
网上好多解答鱼目混珠,但是大部分都在划水,贴了大量代码,读完也没得收获。其实问题很简单,只要说出原理就可以了。
vue 不支持常规的文件访问方式,比如通过 file:///D:/opt/upFiles/temp/15618.png
的方式,图片在 img 配置 src = file:///D:/opt/upFiles/temp/5618.png
也是无效访问。
解决方案
1、文件上传路径要调整到vue项目的 public 目录中
2、在页面中访问即可:src="/logo.png"
注意前面是不加 public 的,因为public访问默认 / 所以直接在后面拼接路径即可
vue(cli3.0)有两个放置静态资源的目录分别是public和assets。
public放不会变动的文件(相当于vue-cli2.x中的static)
public/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这个取决于你vue.config.js中publicPath的配置,默认的是/。
assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。
简单来说就是就是public放别人家js文件(也就是不会变动),assets放自己写js文件(需要改动的文件)
因为想到了 public是访问默认,我们可以通过相对路径去访问 assets 吧,好像是不能。
直接向 public 上传图片肯定是不提倡的,最好还是找个文件服务器吧!