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