图片在vue2中引用的方式和优缺点

建议:
静态图片：优先使用 import 方式引用
动态图片：使用 require() 在 data 或 methods 中动态加载
外部图片：可以直接使用字符串 URL
总的来说，import 方式更适合大多数场景，特别是在需要构建优化和类型检查的项目中。

方式一. 使用 import 引用（比较推荐)
import myImage from '@/assets/images/my-image.png'export default {data() {return {imageSrc: myImage}}
}
//优势：
//构建时会进行资源优化和压缩
//支持 webpack 的模块解析和版本控制
//图片路径错误会在构建时报错，便于发现问题
//更符合模块化开发理念方式二. 在 data 中直接使用路径字符串
export default {data() {return {imageSrc: require('@/assets/images/my-image.png')// 或者imageSrc: '/static/images/my-image.png'}}
}//优势：
//简单直接，适合动态路径
//适合运行时才能确定的图片路径