Vue頁面中引入img圖片的方法

更新時(shí)間：2021年10月20日 09:59:43 作者：Jesse90s

本文主要介紹了Vue頁面中引入img圖片的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我們?cè)趯W(xué)習(xí)html的時(shí)候，圖片標(biāo)簽<img>引入圖片

<img src="../assets/images/avatar.png" width="100%">

但是這樣會(huì)有2個(gè)弊端：

因?yàn)椴捎媒^對(duì)路徑引入，所以如果后面這張圖片移動(dòng)了目錄，就需要修改代src里的路徑
如果這張圖片在同一頁面內(nèi)有多個(gè)地方要使用到，就需要引入多次，而且圖片移動(dòng)了目錄，這么多地方都要修改src路徑

怎么辦？使用動(dòng)態(tài)路徑import、require

首先講講這兩個(gè)兄弟，在ES6之前，JS一直沒有自己的模塊語法，為了解決這種尷尬就有了require.js，在ES6發(fā)布之后JS又引入了import的概念

使用import引入

import之后需要在data中注冊(cè)一下，否則顯示不了

<script>
import lf1 from '@/assets/images/cityOfVitality/lf1.png'
import lf2 from '@/assets/images/cityOfVitality/lf2.png'
import lf3 from '@/assets/images/cityOfVitality/lf3.png'
import lf4 from '@/assets/images/cityOfVitality/lf4.png'
import lf5 from '@/assets/images/cityOfVitality/lf5.png'
import lf6 from '@/assets/images/cityOfVitality/lf6.png'
import lf7 from '@/assets/images/cityOfVitality/lf7.png'
import top1 from '@/assets/images/cityOfVitality/icon_top1.png'
import mixins from './mixins'
export default {
  name: 'LeftPiece',
  mixins: [mixins],
  data () {
    return {
      lf1,
      lf2,
      lf3,
      lf4,
      lf5,
      lf6,
      lf7,
      top1
    }
  }
}
</script>

使用require引入

<script>
import top1 from '@/assets/images/cityOfVitality/icon_top1.png'
import mixins from './mixins'
export default {
  name: 'RightPiecr',
  mixins: [mixins],
  data () {
    return {
      rt1: require('@/assets/images/cityOfVitality/rt1.png'),
      rt2: require('@/assets/images/cityOfVitality/rt2.png'),
      rt3: require('@/assets/images/cityOfVitality/rt3.png'),
      rt4: require('@/assets/images/cityOfVitality/rt4.png'),
      rt5: require('@/assets/images/cityOfVitality/rt5.png'),
      rt6: require('@/assets/images/cityOfVitality/rt6.png'),
      top1
    }
  }
}
</script>

到此這篇關(guān)于Vue頁面中引入img圖片的方法的文章就介紹到這了,更多相關(guān)Vue引入img圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)踐---根據(jù)不同環(huán)境,自動(dòng)轉(zhuǎn)換請(qǐng)求的url地址操作
這篇文章主要介紹了vue實(shí)踐---根據(jù)不同環(huán)境,自動(dòng)轉(zhuǎn)換請(qǐng)求的url地址操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法
這篇文章主要介紹了elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue3.0關(guān)閉eslint校驗(yàn)的3種方法詳解
這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗(yàn)的3種方法,在實(shí)際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
node.js開發(fā)輔助工具nodemon安裝與配置詳解
node.js代碼修改后，需要重新啟動(dòng) Express 應(yīng)用，所做的修改才能生效。若之后的每次代碼修改都要重復(fù)這樣的操作，勢(shì)必會(huì)影響開發(fā)效率，本文將詳細(xì)介紹Nodemon，它會(huì)監(jiān)測項(xiàng)目中的所有文件，一旦發(fā)現(xiàn)文件有改動(dòng)，Nodemon 會(huì)自動(dòng)重啟應(yīng)用
2020-02-02
vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
vue實(shí)現(xiàn)消息向上無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)消息向上無縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
圖文詳解keep-alive如何清除緩存
vue項(xiàng)目中常常會(huì)用到keepalive來作緩存,在應(yīng)付基本要求上能夠說很是方便,可是遇到同一個(gè)頁面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下
2021-08-08
Vue熱更新出現(xiàn)內(nèi)存溢出的解決方法
開發(fā)項(xiàng)目有一段時(shí)間了,隨著項(xiàng)目越來越大,打包的時(shí)間也相應(yīng)的變長了,打包時(shí)的內(nèi)存也增多了,這時(shí)候產(chǎn)生了一個(gè)問題,在發(fā)布項(xiàng)目的時(shí)候,會(huì)出現(xiàn)Vue熱更新出現(xiàn)內(nèi)存溢出的問題,所以本文給大家介紹了Vue熱更新出現(xiàn)內(nèi)存溢出的解決方法,需要的朋友可以參考下
2024-05-05
Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06