引言

一、图片的引入

1.1 使用img标签引入

<img src="path/to/image.jpg" alt="描述">

1.2 使用CSS背景图片

.element {
  background-image: url(path/to/image.jpg);
}

1.3 使用Vue的v-bind指令

<img :src="imageUrl" alt="描述">

在Vue组件的data函数中定义imageUrl：

data() {
  return {
    imageUrl: 'path/to/image.jpg'
  }
}

二、图片的使用

2.1 在模板中使用

<!-- 使用img标签 -->
<img src="path/to/image.jpg" alt="描述">

<!-- 使用CSS背景图片 -->
<div class="element"></div>

<!-- 使用Vue的v-bind指令 -->
<img :src="imageUrl" alt="描述">

2.2 在组件中使用

<template>
  <img :src="imageUrl" alt="描述">
</template>

export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg'
    }
  }
}

三、图片的优化

3.1 压缩图片

3.2 使用合适的图片格式

3.3 使用图片懒加载

<img v-lazy="imageUrl" alt="描述">

总结