第一种方式（适用于处理单个链接的资源文件）

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

第二种方式—– 图片在src目录下

vite官网的静态资源引入参考地址

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

/**
 * 动态加载图片
 * @param url 
 * @returns 
 */
export function dynamicImg(url: string) {
  //console.log('接收', url, 'SSS', import.meta.url);
  //console.log('接收', url, 'SSS', window.location.href);
  let img = new URL(`/src/assets/img/${url}`, window.location.href).href;
  //console.log('返回', img);
  return img;
}

第三种方式—- 图片在public目录下

/**
 * @description: 动态加载图片 （注意：将图片放到public目录下）
 * @param {*} imgUrl public目录下图片的地址：eg: /public/imgs/a.png, 则imgUrl为 ./imgs/a.png
 * @return {*} 返回图片的绝对路径
 */
const loadPicture = (imgUrl) => {
    let pathnameArr = location.pathname.split("/");
    let realPathArr = []
    pathnameArr.forEach(item =>{
        if( item && item.slice(-5) !== '.html'){
            realPathArr.push(item)
        }
    })
    let realPath = location.origin + "/"
    if(realPathArr.length > 0){
        realPath = realPath + realPathArr.join('/') + "/"
    }


    return new URL(imgUrl, realPath).href;
}

总结

到此这篇关于Vue3的vite中图片动态加载3种方式的文章就介绍到这了.