Vue動態(tà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>
總結(jié)
到此這篇關(guān)于Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法的文章就介紹到這了,更多相關(guān)vue動態(tài)加載圖片跨域無法顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何創(chuàng)建并發(fā)布一個 vue 組件
這篇文章主要介紹了詳解如何創(chuàng)建并發(fā)布一個vue組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11Vue3+Vite項目按需自動導(dǎo)入配置以及一些常見問題修復(fù)
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗,下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite項目按需自動導(dǎo)入配置以及一些常見問題修復(fù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02一文帶你了解什么是Vue的前端微服務(wù)架構(gòu)(Micro Frontends)
微前端架構(gòu)是一種將大型前端應(yīng)用拆分為多個小型、獨立的前端應(yīng)用的架構(gòu)風(fēng)格,每個小型前端應(yīng)用都可以獨立部署、獨立開發(fā)和獨立運行,下面我們就來學(xué)習(xí)一下它的相關(guān)使用吧2023-11-11