网站建设中采用的技术方案,网站里的图片是怎么做的,潍坊专业做网站的公司,加强网站建设工作vue3中报错#xff0c;导入reqire静态图片资源的时候#xff0c;显示require不存在 require is not defined 发现是 在vite中不能使用require引入图片资源#xff0c;因为这里的require是webpack提供的一种加载能力#xff0c;由于我们使用的是Vite#xff0c;因此这里必须…vue3中报错导入reqire静态图片资源的时候显示require不存在 require is not defined 发现是 在vite中不能使用require引入图片资源因为这里的require是webpack提供的一种加载能力由于我们使用的是Vite因此这里必须转用 Vite提供的静态资源载入 Vite中静态资源处理
官方示例
const imgUrl new URL(./img.png, import.meta.url).href
document.getElementById(hero-img).src imgUrl
简单的说 new URL 一共接收两个参数第一个参数即图片的路径这里就是对应require中的值第二个参数是vite的一个全局变量可以理解成直接写死了 import.meta.url
解决方案
每次处理太繁琐我们封装一个函数在utils文件夹下require.ts用来处理图片
/** vite的特殊性, 需要处理图片 */
const require_ (imgPath: string) {try {const handlePath imgPath.replace(, ..)console.log(handlePath::, imgPath)return new URL(handlePath, import.meta.url).href} catch (error) {console.warn(error)}
}export { require_ }
使用的时候
import { require_ } from ../utils/index.ts{img: require_(/assets/loginSwiper/slide1.webp),id: 1},
