vue assets动态引入图片解决打包后图片路径错误不显示的问题

通用:适用于处理单个链接的资源文件

import homeIcon from '@/assets/images/home/icon.png'

webpack 构建的项目

这里我们先假设:
静态文件目录:src/assets/images/
我们的目标静态文件在 src/assets/images/home/icon.png

vite 构建的项目

 尝试过require动态引入, 发现报错:require is not defind,这是因为 require 是属于 Webpack 的方法



const getAssetsFile = (fileUrl) => {
   return new URL(`../assets/images/${fileUrl}`, import.meta.url).href
}

静态资源处理 | Vite 官方中文文档

参考官网
vue assets动态引入图片解决打包后图片路径错误不显示的问题_第1张图片

你可能感兴趣的:(前端,vue.js)