首页 > 其他分享 >vue3+vite4实现动态引入图片

vue3+vite4实现动态引入图片

时间:2023-07-18 19:03:14浏览次数:44  
标签:string URL require vue3 引入 import ESM Vite vite4

本来是想使用vue2时使用的require,但是在运行时却突然报错:

看到上面的报错让我很懵,require为啥不能使用呢??

经过我不懈的努力,终于找到原因:

在 Vue 3 和 Vite 4 中,不再推荐使用 CommonJS 的 require 语法,而是使用 ECMAScript 模块(ESM)的 import 语法。Vite 4 默认支持 ESM,因此在使用 Vite 4 时,应该使用 import 而不是 require

如果你尝试在 Vue 3 + Vite 4 项目中使用 require,可能会遇到错误,因为 Vite 默认只解析 ESM 语法,而不解析 CommonJS 语法。这就是为什么你会看到报错。

解决方法:

/**
 * @description import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL
 * @param  {string} path
 * @returns string
 */
export const getImageUrl = (path: string): string => {
  return new URL(`../assets/images/${path}`, import.meta.url).href
}

在页面上直接调用上面这个方法,传入你图片的动态地址就ok了。

 

参考地址:https://cn.vitejs.dev/guide/assets.html

 

标签:string,URL,require,vue3,引入,import,ESM,Vite,vite4
From: https://www.cnblogs.com/ziyoublog/p/17563852.html

相关文章

  • antd+vue3 tree-select 组件库 筛选结果不正确的问题
    第一次遇到这种带搜索框的下拉树状列表搜索关键字的时候出现我不想要的结果。我感觉组件它只是搜索一级列表而没有搜索二级列表,然后一节列表把它整个的二级列表带出来了。二级列表里边包含搜索关键字的所有item才是我想要的。相关代码:1<!--页面名称-->2<div......
  • python怎么引入其他python文件的类
    Python如何引入其他Python文件的类在Python中,我们可以使用import语句来引入其他Python文件中的类。这样做可以使我们在一个文件中使用另一个文件中定义的类,从而实现代码的模块化和重用。问题描述假设我们有两个Python文件:calc.py和main.py。在calc.py中,我们定义了一个简单的计算......
  • 浅析vue3中如何使用动态组件、如何快速理解Vue3的 toRaw和markRaw、ref与shallowRef、
    一、Vue3中使用component:is加载动态组件1、不使用setup语法糖,这种方式和vue2差不多,is可以是个字符串2、使用setup语法糖,这时候的is如果使用字符串就会加载不出来,得使用组件实例<componentclass="task-box":is="componentObj[route.params.type]":info="taskInfo"></co......
  • 当在js文件里引入pinia时报错:Uncaught Error: []: getActivePinia was called with no
    1、问题背景我在一个js文件里需要使用pinia去修改状态存储里的内容,但是在引入pinia的时候,比如contstore=useStore()时发现报错:getActivePiniawascalledwithnoactivePinia.说是实例在文件中使用的时候,pinia实例没有被挂载。发生错误的原因是因为我在js......
  • 保姆级教程:手把手教你搭建vue3+vite+pinia项目,直接上手开发
    虽然代码很机械的就写出来了,但是搭建项目却总是很生疏会忘记呢(毕竟一个项目做n年。。)第一步:npmcreateviteprojectName(你的项目名)第二步,:选择Vue第三步:选择想要用的语言,这里我选了javascript第四步:切换到对应项目目录,npminstall下载当前所需依赖 经过上面四步,一个最简......
  • Vue3 遍历显示Json数组
    在Vue项目中遍历显示Json数组以列表的形式显示的页面上 main.js全局json对象//全局jsonconstglobalData=reactive({extTelTalkData:[{userExten:"1000",userName:"刘亦菲",callStatus:"通话"},......
  • vue3 provide/inject使用
    provide/inject可解决深层组件传值问题父组件import{provide}from"vue";constcurValue=ref(props.modelValue);provide('curTabName',curValue);子组件import{inject}from"vue";constcurTabName=inject("curTabName&quo......
  • 【10.0】Ajax之引入
    【一】Ajax简介【1】精髓精髓:异步提交/局部刷新动态获取用户名,实时跟后端确认并将结果展示给前端【2】发送请求的方式向后端发送请求的方式浏览器地址直接url回车GET请求a标签的href属性GET请求form表单GET请求/POST请求AjaxGET请求/POST请求......
  • js:http-vue-loader从浏览器直接引入vue文件
    docgithub:https://github.com/FranckFreiburger/http-vue-loaderindex.html<!doctypehtml><htmllang="en"><head><scriptsrc="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script><s......
  • 什么是进程和线程? 为什么要引入线程? 进程和线程的区别?
    什么是进程和线程?为什么要引入线程?进程和线程的区别? 什么是进程和线程?什么是进程?进程是程序在某个数据集合上的一次运行活动(不仅包含正在运行的程序实体,并且包括这个运行的程序中占据的所有系统资源,比如说CPU、内存、网络资源等),也是操作系统进行资源分配和保护的基......