vue的圖片需要用require的方式進(jìn)行引入問(wèn)題
圖片用require方式進(jìn)行引入
在vue中，我們有時(shí)候通過(guò)動(dòng)態(tài)的方式加載圖片，需要require的方式進(jìn)行引入圖片。
html
<image :src="rightIcon" mode=""></image> ? ? ? ? ? ?//圖片 <view class="tab" ?:style="tabSrc">背景圖片</view> ?
js
圖片image
export default {
data(){
? ? return(){
? ? ? ?rightIcon: require("./image/membercenter.png")；
? ? ? ? tabSrc:{backgroundImage: "url(" + require("../../static/yes.png") + ")"}
? ??? ?} ? ? ? ? ?
? }?
}require引入的圖片和直接引入的圖片有啥區(qū)別
require 是 node 中的一個(gè)方法，他的作用是 “用于引入模塊、 JSON、或本地文件”。也就是說(shuō)如果我們使用 require 來(lái)引入一個(gè)圖片文件的話(huà)，那么 require 返回的就是用于引入的圖片（npm 運(yùn)行之后圖片的編譯路徑）。 而如果使用字符串的話(huà)，那么則是一個(gè) string 類(lèi)型的固定字符串路徑。
我們知道，src 中引入的圖片應(yīng)該為圖片的本身路徑（相對(duì)路徑或者絕對(duì)路徑），而 vue 項(xiàng)目通過(guò) webpack 的 devServer 運(yùn)行之后，默認(rèn)的 vue-cli 配置下，圖片會(huì)被打包成 name.hash 的圖片名，在這種情況下，如果我們使用固定的 字符串路徑則無(wú)法找到該圖片，所以需要使用 require 方法來(lái)返回 圖片的編譯路徑。
簡(jiǎn)單的說(shuō)，使用require定義之后，你就可以動(dòng)態(tài)使用了，不用require你就只能寫(xiě)死的。不用的話(huà)， :src="’…/img/image.jpg’" 會(huì)被解析為字符串
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue v-for中:key中item.id與Index使用的區(qū)別解析
這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標(biāo)當(dāng)做唯一標(biāo)識(shí),前者能做到全部復(fù)用,本文給大家詳細(xì)講解,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了uni-app?開(kāi)發(fā)微信小程序定位,通過(guò)使用onLocationChange方法持續(xù)監(jiān)聽(tīng)地址，根據(jù)定位精度字段判斷是否使用此次定位的經(jīng)緯度，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue祖孫組件之間的數(shù)據(jù)傳遞案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案
在vuex的時(shí)候刷新以后里面存儲(chǔ)的state就會(huì)被瀏覽器釋放掉,因?yàn)槲覀兊膕tate都是存儲(chǔ)在內(nèi)存中的,所以一刷新頁(yè)面就會(huì)把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案,需要的朋友可以參考下2021-07-07
Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)el-select組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)el-select組件的方法，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的的可以參考一下2023-02-02
解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問(wèn)題
這篇文章主要介紹了解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)
這篇文章主要介紹了Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
指令是Vue.js中一個(gè)重要的特性， 主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過(guò)本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧2017-10-10