Vue3+TS+Vite无法使用require导入图片的解决方法

小火车况且况且

已于 2023-03-24 11:02:01 修改

阅读量2.2k

点赞数 2

分类专栏： Vue 文章标签： webpack javascript 前端

于 2022-11-09 20:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_43972992/article/details/127776448

版权

Vue 专栏收录该内容

78 篇文章 3 订阅

订阅专栏

`Vue3`+`TS`+`Vite`无法使用`require`导入图片的解决方法

问题描述, 当使用const xxx = require('xxx')浏览器会报错, 为啥使用vue-cli脚手架时不会出问题? 是因为webpack处理过了
在这里插入图片描述

1. 替换方法是使用`new URL`

new URL官网说明地址
在这里插入图片描述

官网解释是
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！

这个模式同样还可以通过字符串模板支持动态 URL：

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

2.封装使用

注意: 这里将@替换为..是因为当前handleViteImages 方法的目录是src\utils\index.ts, 而图片的存放地址是src\assets, 这样就可以使用@符号
这么封装的原因是new URL方法会从当前的文件路径下面开始查找

在这里插入图片描述
只要调用了handleViteImages 方法, 就相当于从src\utils\index.ts目录下面开始查找
因此传入@/assets/images/dz.png时, 就相当于在src\utils\index.ts文件夹下使用../assets/images/dz.png进行查找

注意注意

错误的写法

踩坑如果直接这么处理, 会导致打包之后无法找到图片资源,因为vite不会处理哦

/** vite的特殊性, 需要处理图片 */
export const handleViteImages = (imgPath: string) => {
  try {
  	// 错误的写法
    const handlePath = imgPath.replace('@', '..')
    return new URL(handlePath, import.meta.url).href
  } catch (error) {
    console.warn(error)
  }
}

在这里插入图片描述

正确的写法

正确的写法可能有点不理解, 但是可以正常打包并且显示, 主要是为了将字符串变成静态

export const handleViteImages = (imgPath: string) => {
  try {
    const getSplit = imgPath.split("/");
    const getName = getSplit[getSplit.length - 1];
    return new URL(`../assets/images/${getName}`, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};

使用

import { handleViteImages } from '@/utils'
const src_dz = handleViteImages('@/assets/images/dz.png')
// http://localhost:9527/src/assets/images/dz.png