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

更新時間：2022年12月22日 09:34:45 作者：東非不開森

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

1. vue-cli搭建的項目

在項目中我們想要動態(tài)引入本地圖片的時候，（注意這是在cli搭建的，vite里面沒有require(),vite里面需要封裝個工具）

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

require作用

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

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

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

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

這樣就可以啦

不能直接require(item.path)

原因：

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

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

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

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

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

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

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

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

完成

補充：vue3加載動態(tài)圖片

一、動態(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ù)需求寫邏輯
? ? ? ? ? ? return new URL('../assets/img/home/container_bg.png', import.meta.url).href;
? ? ? ? };

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

二、動態(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>