vue + 动态加载图片

作者：代码艺术家 | 2024-02-01 08:23:22

踩

vue + 动态加载图片

1、适用于处理少量链接的资源文件

import img from './img.png';
<img :src="img" >
1
2

2、图片在src目录下
vite官网的静态资源引入参考地址
new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

<img :src="getUrl(obj.img)" alt="">
const getUrl = (url: string) => {
  return new URL('../../assets/image/order/' + url, import.meta.url).href;
}
1
2
3
4

注意：这里只能通过 …/…/ 这种方式去获取路径，无法通过@/assets>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/52575?site