vue3引入图片

在Vue中插入图片，我们可以使用HTML的R20;标签或者使用CSS的`background-image`属性，下面我将详细介绍这两种方法。

我们来看一下如何使用HTML的“标签来插入图片：

<template>
  <div>
    <img src="路径/到/你的/图片.jpg" alt="图片描述">
  </div>
</template>

在上面的代码中，你需要将`路径/到/你的/图片.jpg`替换为你的图片的实际路径，将`图片描述`替换为对图片的描述。

这种方法有一个问题，那就是如果你需要在多个地方插入相同的图片，你需要重复这段代码，为了解决这个问题，你可以使用Vue的数据绑定功能，将图片路径绑定到Vue实例的一个数据属性上：

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

<script>
export default {
  data() {
    return {
      imagePath: '路径/到/你的/图片.jpg'
    }
  }
}
</script>

你就可以在任何地方通过引用这个数据属性来插入图片了。

接下来，我们来看一下如何使用CSS的`background-image`属性来插入图片：

<template>
  <div class="image-container">
  </div>
</template>

<style scoped>
.image-container {
  width: 100px; /* 你想要的宽度 */
  height: 100px; /* 你想要的高度 */
  background-image: url('路径/到/你的/图片.jpg'); /* 你想要的图片路径 */
  background-size: cover; /* 这会保持图片的比例并覆盖整个容器 */
}
</style>

在这个例子中，我们创建了一个名为`.image-container`的类，然后在这个类的样式中设置了背景图片，你可以将`.image-container`添加到你想要显示图片的任何元素上。

同样地，如果你需要在多个地方插入相同的图片，你可以通过修改`.image-container`类的样式来实现，而不需要重复编写代码。