首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+vite动态引入图片

vue3+vite动态引入图片方式

2023-06-05 14:49:00 作者：shareloke

这篇文章主要介绍了vue3+vite动态引入图片方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue3+vite动态引入图片

说明

在vue2中可以使用require动态引入图片，但在开发vue3+vite项目的时候想要动态的去引入图片来显示，尝试过require 发现报错 require is not defind。

因为require是webpack的方法，而vite是不支持require方法的，vite官网：

服务时引入一个静态资源会返回解析后的公共路径：

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

例如，imgUrl 在开发时会是 /img.png，在生产构建后会是 /assets/img.2d8efhg.png。

行为类似于 Webpack 的 file-loader。

区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

实现方式

方式一

比较笨的实现方法使用 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动态引入本地图片img

需求：

引入到js中批量绑定在dom上，作图标进行展示。

这样就可以动态引入了

第二种直接引入

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue3+vite动态引入图片方式