图片引入方法概述
- 直接在
<img>
标签中使用src
属性。 - 使用
import
语句引入图片。 - 利用
require
函数引入图片。
下面将逐一介绍这些方法。
方法一:直接在<img>
标签中使用src
属性
这是最直接的方法,与常规HTML标签类似。
<img :src="imageUrl" alt="示例图片">
data() {
return {
imageUrl: 'path/to/your/image.jpg'
};
}
方法二:使用import
语句引入图片
import logo from '@/assets/logo.png';
然后在模板中使用:
<img :src="logo" alt="示例图片">
方法三:利用require
函数引入图片
require
函数与import
语句类似,但不需要写路径。
const logo = require('@/assets/logo.png');
然后在模板中使用:
<img :src="logo" alt="示例图片">
图片路径的注意事项
- 确保图片路径正确:路径错误会导致图片无法显示。
- 使用相对路径或绝对路径:相对路径需要从
src
目录开始,绝对路径可以直接写文件系统路径。 - 考虑图片懒加载:对于大量图片的页面,可以使用图片懒加载技术,提高页面加载速度。