vue如何访问本地图片

在Vue中访问本地图片需要使用相对路径，将图片放在项目的public目录下，然后在组件中通过相对路径来引用图片。具体的步骤如下：

1. 在public目录下创建一个用于存放图片的文件夹，例如：public/images。

2. 将需要引用的图片放在该文件夹下。

3. 在组件中引用图片时，使用相对路径来指定图片的位置。例如：

<template>
  <div>
    <img :src="require('@/public/images/logo.png')" alt="logo">
  </div>
</template>

在上面的例子中，我们使用了require函数来引用图片。@符号表示src目录，因此我们使用@/public/images/logo.png来指定图片的位置。

需要注意的是，如果图片的路径中包含变量，则无法使用上面的方法来引用图片。这种情况下，可以使用计算属性来动态生成图片的路径。

<template>
  <div>
    <img :src="imageUrl" alt="image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageName: 'logo.png',
      imagePath: '@/public/images/'
    }
  },
  computed: {
    imageUrl() {
      return require(`${this.imagePath}${this.imageName}`)
    }
  }
}
</script>

在上面的例子中，我们通过计算属性来动态生成图片的路径。imageName表示图片的名称，imagePath表示图片所在的目录。计算属性imageUrl将imageName和imagePath拼接起来，然后使用require函数来引用图片。