一、图片引用的基本方法

1. 使用<img>标签

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

2. 使用CSS背景图

.background-image {
  background-image: url('/path/to/image.png');
}

二、图片路径管理

1. 使用绝对路径

2. 使用相对路径

使用相对路径是一种比较灵活的方法。你可以根据项目的结构来设置相对路径，例如：

<img src="@/assets/image.png" alt="描述">

这里的@符号是vue-cli脚手架提供的别名，通常指向src目录。

3. 使用Webpack配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
};

三、图片懒加载

1. 使用Vue的指令

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

2. 使用第三方库

<template>
  <img v-lazy="imageSrc" alt="描述">
</template>

<script>
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload);
</script>

四、总结