vue3 + vite动态引入图片以及本地正常展示,线上部署不正常显示的解决方法

方案一 使用import引入

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

方案二 使用 new URL

// ../assets/imgs为图片公共路径
export function getAssetsFile(url: string) {
  return new URL(`../assets/imgs/${url}`, import.meta.url).href;
};
// 这种写法打包部署到服务器后,图片加载不出来
export function getAssetsFile(url: string) {
  return new URL(url, import.meta.url).href;
};

vite官方描述

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