快捷導(dǎo)航

Vue3中引用本地圖片路徑的方法詳解

更新時間：2024年03月21日 08:34:37 作者：程序員大澈

這篇文章主要為大家詳細介紹了Vue3中引用本地圖片路徑的常用方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

兩種情況引用實現(xiàn)

1、在模版中使用

首先要注意這里使用的是img元素，不是el-image等圖片UI組件。此時使用相對路徑或絕對路徑都可以。

<template>
    <img style="width: 100px; height: 100px" src="@/assets/01.png" />
</template>

在Vite腳手架搭建的項目中，下面幾種情況都是不行滴，只能使用下面我們說的在邏輯中使用的方法！

<el-image :src="require('@/assets/2.png')" />  //X
<el-image :src="require('../assets/2.png')" />  //X

<el-image src="@/assets/2.png" /> //X  
<el-image src="../assets/2.png" />  //X

在Vue-cli腳手架搭建的項目中，必須要帶有require，直接使用相對路徑或絕對路徑引用是不行滴！

<el-image :src="require('@/assets/2.png')" />  //√
<el-image :src="require('../assets/2.png')" />  //√

<el-image src="@/assets/2.png" />  //X
<el-image src="../assets/2.png" />  //X

2、在邏輯中使用

掌握這種Vue3常規(guī)用法基本就OK了。

<template>
    <el-image style="width: 100px; height: 100px" :src="accIcon" />
</template>

<script setup>
import accIcon from "@/assets/01.png"
</script>

如果你是Vue2項目，無論是在邏輯還是模版中，都用require就OK了。

知識補充

除了上文的方法，小編還為大家整理了vue導(dǎo)入及使用本地圖片的常用方法，希望對大家有所幫助

1.直接使用

<template>
  <img src="./image/1.jpg"/>
</tempalte>

2.data里使用require

<template>
  <img :src="imgUrl">
</template>
<script>
export default {
  data() {
    return {
      imgUrl:require('./image/1.jpg')
    }
  }
}  
</script>

3.data使用import進來

<template>
  <img :src="imgUrl">
</template>
<script>
import img from './image/1.jpg'
export default {
  data() {
    return {
      imgUrl:img
    }
  }
}  
</script>

4.使用生命周期

<template>
  <img :src="imgUrl">
</template>
<script>
export default {
  data() {
    return {
      imgUrl:''
    }
  },
 created() {
    let urlImg = "pages/MSite/image/1.jpg"
    this.imgUrl = require("@/"+urlImg)
  }
}  
</script>

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

您可能感興趣的文章: