Vue動(dòng)態(tài)加載圖片在跨域時(shí)無法顯示的問題及解決方法
寫在前面
小記,就簡單寫了 。問題:VUE開發(fā)時(shí)因?yàn)橐L問后端的接口所以要配置請求轉(zhuǎn)發(fā),如果直接轉(zhuǎn)發(fā)全部請求,那么VUE動(dòng)態(tài)綁定的src也會(huì)轉(zhuǎn)發(fā)到后端,因?yàn)閳D片在前端,所以會(huì)收到404 NOT FOUND的報(bào)錯(cuò)。
常規(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動(dòng)態(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)會(huì)找不到該圖片。原因:通常在編譯運(yùn)行后,圖片會(huì)被webpack統(tǒng)一打包到localhost:8080/static/img/[文件名].png,因?yàn)槭巧鲜鲞^程動(dòng)態(tài)加載的,所以url-loader無法解析圖片地址,所以導(dǎo)致上述方法中的圖片無法在瀏覽器內(nèi)顯示。解決方法就是通過require(``)這樣的方法將圖片作為模塊被加載。
跨域請求轉(zhuǎn)發(fā)時(shí)找不到圖片
前面也說了,就是因?yàn)檗D(zhuǎn)發(fā)了全部請求,所以上述require(``)過后,瀏覽器去后端找圖片了,導(dǎo)致找不到。
解決思路:只轉(zhuǎn)發(fā)要訪問后端接口的請求,其它不變。
所以其實(shí)就是過濾一下,添加一個(gè)條件。如下:要訪問后端的請求在url上加一個(gè)/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ù)前加一個(gè)'/api'前綴,如下:
export const getRequst=(url,params)=>{ return axios({ method:'get', url:'/api'+ url,//原來為 url:url, data:params, }) };
這下訪問后端的請求全部在url上套上了'/api',而其它請求也不會(huì)被轉(zhuǎn)發(fā)到后端了。
知識(shí)點(diǎn)補(bǔ)充:vue中解決跨域問題
方法1.后臺(tái)更改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 代理解決(項(xiàng)目使用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ù)時(shí)直接使用“/api”:
getData () { axios.get('/api/bj11x5.json', function (res) { console.log(res) })
通過這中方法去解決跨域,打包部署時(shí)還按這種方法會(huì)出問題。解決方法如下:
let serverUrl = '/api/' //本地調(diào)試時(shí) // let serverUrl = 'http://f.apiplus.cn/' //打包部署上線時(shí) 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>
總結(jié)
到此這篇關(guān)于Vue動(dòng)態(tài)加載圖片在跨域時(shí)無法顯示的問題及解決方法的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)加載圖片跨域無法顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何創(chuàng)建并發(fā)布一個(gè) vue 組件
這篇文章主要介紹了詳解如何創(chuàng)建并發(fā)布一個(gè)vue組件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11vue如何實(shí)時(shí)往數(shù)組里追加數(shù)據(jù)
這篇文章主要介紹了vue如何實(shí)時(shí)往數(shù)組里追加數(shù)據(jù),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue+Element樹形表格實(shí)現(xiàn)拖拽排序示例
本文主要介紹了Vue+Element樹形表格實(shí)現(xiàn)拖拽排序示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Vue3+Vite項(xiàng)目按需自動(dòng)導(dǎo)入配置以及一些常見問題修復(fù)
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目按需自動(dòng)導(dǎo)入配置以及一些常見問題修復(fù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02一文帶你了解什么是Vue的前端微服務(wù)架構(gòu)(Micro Frontends)
微前端架構(gòu)是一種將大型前端應(yīng)用拆分為多個(gè)小型、獨(dú)立的前端應(yīng)用的架構(gòu)風(fēng)格,每個(gè)小型前端應(yīng)用都可以獨(dú)立部署、獨(dú)立開發(fā)和獨(dú)立運(yùn)行,下面我們就來學(xué)習(xí)一下它的相關(guān)使用吧2023-11-11