1. 图片绑定概述

  • 使用字符串直接指定图片路径
  • 使用变量来动态绑定图片路径
  • 使用require函数动态引入图片

2. 使用require绑定图片

2.1 基本语法

<template>
  <img :src="imageSrc" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: require('./path/to/image.png')
    };
  }
}
</script>

2.2 图片路径解析

  • ./ 表示当前目录
  • ../ 表示上级目录
  • / 表示根目录

例如，require('./image.png') 引用的是当前目录下的image.png文件。

2.3 跨域问题

3. 实例解析

<template>
  <div>
    <img :src="coverImage" />
    <h2>{{ bookTitle }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookTitle: 'Vue.js从入门到精通',
      coverImage: require('./path/to/book-cover.jpg')
    };
  }
}
</script>

4. 总结