欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年12月22日 09:34:45   作者:東非不開森  
這篇文章主要給大家介紹了關于Vue3使用src動態(tài)引入本地圖片的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

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處理解析為模塊依賴,只支持相對路徑的形式,加載圖片模塊通過webpackurl-loader加載器來實現(xiàn),url-loader是解析不了動態(tài)綁定的src的導致最終顯示的地址是未處理的地址,因此動態(tài)綁定src時要通過加載模塊的方式去加載這個圖片 使用require(“ ”)

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

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

(這個地方后面會去學習一下,我覺得要學一下webpack(個人拙見,我還不太了解QAQ))

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

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

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

export const getAssetURL = (image) => {
  // 參數(shù)一: 相對路徑
  // 參數(shù)二: 當前路徑的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中設置

<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>

總結

到此這篇關于Vue3使用src動態(tài)引入本地圖片的文章就介紹到這了,更多相關Vue3 src動態(tài)引入本地圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論