首页 前端知识 vue assets动态引入图片解决打包后图片路径错误不显示的问题

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

2024-06-10 11:06:38 前端知识 前端哥 129 787 我要收藏

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

import homeIcon from '@/assets/images/home/icon.png'
<img :src="homeIcon" />

webpack 构建的项目

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

<img :src="require('@/assets/images/home/icon.png')" />

vite 构建的项目

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

<img :src="getAssetsFile('/home/icon.png')" />

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

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

参考官网

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11745.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!