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

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

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

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

說明

在vue2中可以使用require動態(tài)引入圖片，但在開發(fā)vue3+vite項目的時候想要動態(tài)的去引入圖片來顯示，嘗試過require 發(fā)現(xiàn)報錯 require is not defind。

因為require是webpack的方法，而vite是不支持require方法的，vite官網(wǎng)：

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

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

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

行為類似于 Webpack 的 file-loader。

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

實現(xiàn)方式

方式一

比較笨的實現(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 {
    // 地址錯誤
    console.log("Error url is wrong path");
  }
};
// 使用 必須是帶有/src 完整目錄
useFile("/src/assets/bg/bg.png");

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

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

需求：

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

 

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

第二種直接引入

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

第三種可以直接在assets前面加一個src就能識別了

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

總結(jié)

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

相關(guān)文章

最新評論