vue 项目打包图片没有打包进去问题解决

本文主要是介绍vue 项目打包图片没有打包进去问题解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题

vue 项目打包，项目中引用了的图片没有被打进包里，导致打包后的项目图片缺失。

解决方法

1、在导入图片的文件中通过 import 引入图片

这种方法只适合图片少的情况

<template><img :src='testImg'/>
</template><script>import testImg from '@/assets/img/testImg.png'
</script>

2、封装公共方法,通过 new URL() 的方式获取图片

const getImg = (url: string) => {return new URL(`../assets/img/${url}`, import.meta.url).href;
};const testImg = getImg('testImg')

这篇关于vue 项目打包图片没有打包进去问题解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---