『壹』 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文件夾里：