您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Vue動態(tài)加載圖片在跨域時無法顯示怎么辦的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
寫在前面
小記,就簡單寫了 。問題:VUE開發(fā)時因為要訪問后端的接口所以要配置請求轉(zhuǎn)發(fā),如果直接轉(zhuǎn)發(fā)全部請求,那么VUE動態(tài)綁定的src也會轉(zhuǎn)發(fā)到后端,因為圖片在前端,所以會收到404 NOT FOUND的報錯。
常規(guī)的請求轉(zhuǎn)發(fā)
在vue-cli3內(nèi),直接編輯vue.config.js,如下:
let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pathRewrite:{ '^/':'' } }; module.exports={ devServer:{ host:'localhost', port:8080, proxy:proxyObj } };
代碼很簡單,就不解釋了,這段代碼就是把所有請求都轉(zhuǎn)發(fā)到了后端。
常規(guī)的src動態(tài)綁定
如下:
// position.duiduorob為data內(nèi)定義的字段 <img :src="require(`@/assets/image/dianhan${position.duiduorob}.png`)" >
值得注意的是,需要用require(``)這樣的方法,如果直接填寫圖片地址如:
<img :src="'../../assets/image/dianhan'+position.duiduorob+'.png'">
瀏覽器內(nèi)會找不到該圖片。原因:通常在編譯運行后,圖片會被webpack統(tǒng)一打包到localhost:8080/static/img/[文件名].png,因為是上述過程動態(tài)加載的,所以url-loader無法解析圖片地址,所以導(dǎo)致上述方法中的圖片無法在瀏覽器內(nèi)顯示。解決方法就是通過require(``)這樣的方法將圖片作為模塊被加載。
跨域請求轉(zhuǎn)發(fā)時找不到圖片
前面也說了,就是因為轉(zhuǎn)發(fā)了全部請求,所以上述require(``)過后,瀏覽器去后端找圖片了,導(dǎo)致找不到。
解決思路:只轉(zhuǎn)發(fā)要訪問后端接口的請求,其它不變。
所以其實就是過濾一下,添加一個條件。如下:要訪問后端的請求在url上加一個/api即可
let proxyObj={}; proxyObj['/api']={ //url前部加上'/api' ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pathRewrite:{ '^/api':'' //到了后端去掉/api } }; module.exports={ devServer:{ host:'localhost', port:8080, proxy:proxyObj } };
所以在其他部分全部不變的情況下,只需在你封裝的http請求方法內(nèi)給url參數(shù)前加一個'/api'前綴,如下:
export const getRequst=(url,params)=>{ return axios({ method:'get', url:'/api'+ url,//原來為 url:url, data:params, }) };
這下訪問后端的請求全部在url上套上了'/api',而其它請求也不會被轉(zhuǎn)發(fā)到后端了。
知識點補充:vue中解決跨域問題
方法1.后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問 header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
方法2.使用JQuery提供的jsonp
methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split(',') } }) } }
方法3.使用http-proxy-middleware 代理解決(項目使用vue-cli腳手架搭建)
例如請求的url:“http://f.apiplus.cn/bj11x5.json”
1、打開config/index.js,在proxyTable中添寫如下代碼:
proxyTable: { '/api': { //使用"/api"來代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改變源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路徑重寫 } } }
2、使用axios請求數(shù)據(jù)時直接使用“/api”:
getData () { axios.get('/api/bj11x5.json', function (res) { console.log(res) })
通過這中方法去解決跨域,打包部署時還按這種方法會出問題。解決方法如下:
let serverUrl = '/api/' //本地調(diào)試時 // let serverUrl = 'http://f.apiplus.cn/' //打包部署上線時 export default { dataUrl: serverUrl + 'bj11x5.json' }
附:
方法二引入jq
1.下載依賴
cnpm install jquery --save-dev
2.在webpack.base.conf.js文件中加入
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ],
3.在需要的temple里引入也可以在main.js里全局引入
import $ from 'jquery'
eg:
<template> <div class="source"> source{{data}} </div> </template> <script> import $ from 'jquery' export default({ name:"source", data(){ return{ data:"" } }, created(){ this.getData() }, methods:{ getData () { var self = this $.ajax({ url: '你要請求的url', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.result } }) } } }) </script> <style> </style>
感謝各位的閱讀!關(guān)于“Vue動態(tài)加載圖片在跨域時無法顯示怎么辦”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。