快捷導(dǎo)航

Vue3使用src動(dòng)態(tài)引入本地圖片的詳細(xì)步驟

更新時(shí)間：2022年12月22日 09:34:45 作者：東非不開(kāi)森

這篇文章主要給大家介紹了關(guān)于Vue3使用src動(dòng)態(tài)引入本地圖片的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1. vue-cli搭建的項(xiàng)目

在項(xiàng)目中我們想要?jiǎng)討B(tài)引入本地圖片的時(shí)候，（注意這是在cli搭建的，vite里面沒(méi)有require(),vite里面需要封裝個(gè)工具）

通過(guò)v-bind動(dòng)態(tài)綁定
通過(guò)的require引入

require作用

用于引入模板、JSON、或本地文件

下面這種require直接包裹全部路徑是可以的，但是我在想感覺(jué)不太優(yōu)雅

想直接在src里用require(item.imageActive)這樣思路是沒(méi)有錯(cuò)的，但是require是引入路徑這里我們需要給它拼接上路徑(直接進(jìn)行紅字部分是錯(cuò)誤的)

我們需要給它拼接一下，一定是不能直接傳入變量，不然無(wú)法解析

這樣就可以啦

不能直接require(item.path)

原因：

參考資料： assets：在項(xiàng)目編譯的過(guò)程中會(huì)被webpack處理解析為模塊依賴，只支持相對(duì)路徑的形式，加載圖片模塊通過(guò)webpack的url-loader加載器來(lái)實(shí)現(xiàn)，url-loader是解析不了動(dòng)態(tài)綁定的src的導(dǎo)致最終顯示的地址是未處理的地址，因此動(dòng)態(tài)綁定src時(shí)要通過(guò)加載模塊的方式去加載這個(gè)圖片使用require(“ ”)

具體的話我現(xiàn)在還不是特別理解

還有vue-cli下assets和static文件夾的區(qū)別

（這個(gè)地方后面會(huì)去學(xué)習(xí)一下，我覺(jué)得要學(xué)一下webpack（個(gè)人拙見(jiàn)，我還不太了解QAQ））

2.vite搭建的項(xiàng)目動(dòng)態(tài)引入本地圖片

由于vite里面沒(méi)有require(), 所以需要封裝個(gè)工具

如下面這種工具（codewhy老師封裝的，why老師yyds）再在引用一下就可以了

export const getAssetURL = (image) => {
  // 參數(shù)一: 相對(duì)路徑
  // 參數(shù)二: 當(dāng)前路徑的URL
  return new URL(`../assets/img/${image}`, import.meta.url).href
}

完成

補(bǔ)充：vue3加載動(dòng)態(tài)圖片

一、動(dòng)態(tài)加載圖片

使用new URL(url, import.meta.url)

<template>
? ? <div class="home">
? ? ? ? <img :src="getImageUrl()" alt="" />
? ? </div>
</template>
<script lang="ts">
export default {
? ? name: 'HomeIndex',
? ? setup() {
? ? ? ? const getImageUrl = () => {
? ? ? ? ?? ?// 里面可以根據(jù)需求寫(xiě)邏輯
? ? ? ? ? ? return new URL('../assets/img/home/container_bg.png', import.meta.url).href;
? ? ? ? };

? ? ? ? return { getImageUrl };
? ? },
};
</script>

二、動(dòng)態(tài)加載背景圖

2.1 style中設(shè)置

<template>
? ? <div
? ? ? ? class="container"
? ? ? ? :style="{
? ? ? ? ? ? background: 'url(' + getAssetsFile(true) + ') no-repeat',
? ? ? ? ? ? backgroundSize: '100% 100%',
? ? ? ? }"
? ? ></div>
</template>
<script lang="ts">
export default {
? ? name: 'HomeIndex',
? ? setup() {
? ? ? ? const getAssetsFile = (isAlarm: boolean) => {
? ? ? ? ? ? const url = isAlarm
? ? ? ? ? ? ? ? ? '../assets/img/monitor_alarm_bg.png'
? ? ? ? ? ? ? ? : '../assets/img/monitor_bg.png';
? ? ? ? ? ? return new URL(url, import.meta.url).href;
? ? ? ? };

? ? ? ? return { getAssetsFile };
? ? },
};
</script>
<style lang="scss">
.container {
? ? width: 300px;
? ? height: 100px;
}
</style>

2.2 修改class

<template>
    <div :class="['container', isAlarm ? 'monitor_alarm' : 'monitor_normal']"></div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    name: 'HomeIndex',
    setup() {
        const isAlarm = ref(true);
        const getAssetsFile = (isAlarm: boolean) => {
            const url = isAlarm
                ? '../assets/img/monitor_alarm_bg.png'
                : '../assets/img/monitor_bg.png';
            return new URL(url, import.meta.url).href;
        };

        return { getAssetsFile, isAlarm };
    },
};
</script>
<style lang="scss">
.container {
    width: 300px;
    height: 100px;
}
.monitor_normal {
    background: url(@/assets/img/monitor_bg.png) no-repeat;
    background-size: 100% 100%;
}

.monitor_alarm {
    background: url(@/assets/img/monitor_alarm_bg.png) no-repeat;
    background-size: 100% 100%;
}
</style>