‘壹’ vue img标签src使用网络地址展示图片无法显示
开发时模拟数据时使用了网络图片，vue img标签src使用网络地址展示图片无法显示，情况如图：
图片的请求出现403错误：GET http://xxxxxxxxxxxx 403（Forbidden）
疫情期间在家脑袋锈成铁，这个问题我遇到过。。。
解决办法，在index.html头部添加meta标签 <meta name="referrer" content="no-referrer">
referrer，一种引用策略，可以用来防止图片或视频被盗。它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。（解释来源于网络）
成功显示了！
颇费~
‘贰’ vue + elementui upload上传图片到服务器以及保存后回显问题
前言：
关于vue和elementui安装导入使用不做介绍
1.template中首先展示upload多张图片上传
2.当upload组件发生改变时处罚addFile
3.图片提交到服务器，拿到服务器的数据地址
3.显示图片 将拿到的数据放进一个数组中显示到file-list中去就好了
至此，完结。
有不对的地方欢迎指导哦。
‘叁’ vue上传图片设置headers表头信息
<el-form-item label="icon图标" prop="icon">
<span><img :src="ruleForm.icon_url" min-width="70" height="70" />
class="avatar-uploader"
action
name="file1"
:data="{index:1}"//传递参数
:show-file-list="false"
:http-request="uploadFileUrl" > <div class="upload-btn">上传
</el-form-item>
//上传图片
uploadFileUrl(file){
var fileIndex=file.data.index;
//console.log("=========",file.data.index);
let formData =new FormData()
formData.append("file", file.file)
/**上传图片接口*/
const instance =Axios.create({
baseURL:"http://216.118.XXX.50:8082",//服务器地址
timeout:10000,
headers:{'Content-Type':'multipart/form-data',"auth":sessionStorage.getItem("token"),"uid":sessionStorage.getItem("uid_ciphertext")},
method:'POST',
data:formData
})
instance({url:"/api/v1/admins/games/images/upload"}).then((data) => {
// console.log(JSON.stringify(data))
this.ruleForm.icon_url=data.data.data.icon_url;
})
},
‘肆’ java读取nas存储图片给vue
单纯的上传文件，java的存储图片的方式也有局限性。
1、图片存储在另一个项目工程的资源文件夹中，通过路径直接访问是访问不到的。
2、前端vue获取图片名称，拼接文件服务器地址来访问显示图片。
3、出于时间考虑，尽可能的简单实现，相对FTP来说，tomcat的文件服务器不需要考虑用户密码的配置。
‘伍’ uniapp上传图片至服务器，获得在线图片链接预览（实战）
功能需求：
前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。
思路如下：
前端选择本地的png、jpg、等格式的图片，将图片以二进制的形式传到后端服务器，后端对二进制图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。
首先
我们看一下uniapp的官方文档：
https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是这样的
先写一个模拟的demo
1：首先我是是用了colorUI的框架，在项目里面引入
在page底下的vue文件引入
这样一来，就不需要写什么样式了，直接使用写好的就行了。
效果是这样的
每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。
在 chooseImage 选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。
若是请求成功
则返回一个图片链接
添加接口之后 的，demo如下：
‘陆’ vue中require引入asset文件夹图片地址(个人笔记)
项目中引用的图片都直接引用静态目录static下的图片，如果图片放到srcassets目录下，项目中引用图片的相对路径，在vue打包的时候会改变图片的引用名称，所以会出现访问不到图片的情况。
如果把图片放到asset文件夹里：