在Vue单文件组件中导入和使用图片可以通过以下几种方法实现。下面将详细介绍每种方法的步骤以及相关的实例源代码。

方法一：直接使用<img>标签

<template>
  <div>
    <img src="@/assets/image.jpg" alt="图片描述" />
  </div>
</template>

确保图片位于src/assets目录下。

方法二：使用require导入图片

<template>
  <div>
    <img :src="require('@/assets/image.jpg')" alt="图片描述" />
  </div>
</template>

方法三：使用import语句导入图片

<template>
  <div>
    <img :src="imageSrc" alt="图片描述" />
  </div>
</template>

<script>
import imageSrc from '@/assets/image.jpg';

export default {
  data() {
    return {
      imageSrc: imageSrc
    };
  }
};
</script>

选择其中一种方法根据项目实际情况和个人偏好来决定。在使用require或import时，确保已经配置好Webpack或其他构建工具的相关加载器。