vue的圖片需要用require的方式進(jìn)行引入問題
更新時間：2022年03月28日 11:13:45 作者：黃不逗
這篇文章主要介紹了vue的圖片需要用require的方式進(jìn)行引入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
圖片用require方式進(jìn)行引入
在vue中，我們有時候通過動態(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 中的一個方法，他的作用是 “用于引入模塊、 JSON、或本地文件”。也就是說如果我們使用 require 來引入一個圖片文件的話，那么 require 返回的就是用于引入的圖片（npm 運(yùn)行之后圖片的編譯路徑）。 而如果使用字符串的話，那么則是一個 string 類型的固定字符串路徑。
我們知道，src 中引入的圖片應(yīng)該為圖片的本身路徑（相對路徑或者絕對路徑），而 vue 項目通過 webpack 的 devServer 運(yùn)行之后，默認(rèn)的 vue-cli 配置下，圖片會被打包成 name.hash 的圖片名，在這種情況下，如果我們使用固定的 字符串路徑則無法找到該圖片，所以需要使用 require 方法來返回 圖片的編譯路徑。
簡單的說，使用require定義之后，你就可以動態(tài)使用了，不用require你就只能寫死的。不用的話， :src="’…/img/image.jpg’" 會被解析為字符串
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue如何啟動項目的相關(guān)資料,還介紹了解決vue啟動項目時間很長問題的相關(guān)方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue cli升級webapck4的步驟以及需要注意的地方，大家可以跟著操作學(xué)習(xí)下。2018-04-04
vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個vue頁面實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個vue頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue中如何配置proxy代理問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題
這篇文章主要介紹了關(guān)于vue中標(biāo)簽的屬性綁定值渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)
這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼
本文通過實例代碼給大家介紹了vue.js通過路由實現(xiàn)經(jīng)典的三欄布局，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要給大家介紹了關(guān)于Vue3中引入scss文件的方法步驟,在實際項目中,各種樣式往往有很多重復(fù)的情況,為了能夠使樣式的后續(xù)開發(fā)和維護(hù)更加愜意,將這些共同的代碼進(jìn)行命名然后調(diào)用這些變量是一個很好的選擇,需要的朋友可以參考下2023-08-08