亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3+vite動(dòng)態(tài)引入圖片方式

 更新時(shí)間：2023年06月05日 14:49:00   作者：shareloke  
這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3+vite動(dòng)態(tài)引入圖片

說明

在vue2中可以使用require動(dòng)態(tài)引入圖片，但在開發(fā)vue3+vite項(xiàng)目的時(shí)候想要?jiǎng)討B(tài)的去引入圖片來顯示，嘗試過require 發(fā)現(xiàn)報(bào)錯(cuò) require is not defind。

因?yàn)閞equire是webpack的方法，而vite是不支持require方法的，vite官網(wǎng)：

服務(wù)時(shí)引入一個(gè)靜態(tài)資源會(huì)返回解析后的公共路徑：

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

例如，imgUrl 在開發(fā)時(shí)會(huì)是 /img.png，在生產(chǎn)構(gòu)建后會(huì)是 /assets/img.2d8efhg.png。

行為類似于 Webpack 的 file-loader。

區(qū)別在于導(dǎo)入既可以使用絕對(duì)公共路徑（基于開發(fā)期間的項(xiàng)目根路徑），也可以使用相對(duì)路徑。

實(shí)現(xiàn)方式

方式一

比較笨的實(shí)現(xiàn)方法 使用 import()

const bgImage = ref<string>("");
const bgImageFunc = (url: string) =>
  import(url).then((res: any) => {
    bgImage.value = res.default;
  });
// 使用
bgImageFunc("../../assets/images/bg/bg.jpg");

方式二

使用vite官方提供的方式

/**
 * <p> 獲取加載圖片地址 </p>
 * examples: bg/bg.png
 * @param imgPath: string
 */
export const requireImg = (imgPath: string) => {
  return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
// 使用
requireImg("bg/bg.png");

方式三

使用 import.meta.glob 提供的方法

/**
 * <p> 獲取加載圖片地址 </p>
 * examples: /src/assets/bg/bg.png
 * @param url: string
 *
 */
export const useFile = (url: string) => {
  const modules: Record<string, any> = import.meta.glob("@/assets/images/**/*.{png,svg,jpg,jpeg}", { eager: true });
  if (modules[url]) return modules[url].default;
  else {
    // 地址錯(cuò)誤
    console.log("Error url is wrong path");
  }
};
// 使用 必須是帶有/src 完整目錄
useFile("/src/assets/bg/bg.png");

以上三種方式可以任選一種即可

vue3使用vite2.0動(dòng)態(tài)引入本地圖片img

需求：

引入到j(luò)s中批量綁定在dom上，作圖標(biāo)進(jìn)行展示。

 

這樣就可以動(dòng)態(tài)引入了

第二種直接引入

import tyarticle_iconpe from '@/assets/images/home_icon/brochure_icon.png'

第三種可以直接在assets前面加一個(gè)src就能識(shí)別了

new URL(`/src/assets/images/home_icon/name_icon`, import.meta.url).href

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論