vue3 快速入门 : vue中的图片路径

在Vue 3中，图片路径问题通常涉及到静态资源的引用。Vue CLI创建的项目默认会将静态资源放在public文件夹下，或者在src文件夹下的assets文件夹。以下是一些处理图片路径的方法：

1. 使用相对路径：

<img src="./assets/logo.png" alt="Logo">

2. 使用Vue CLI提供的静态资源引用（推荐）：

   在public文件夹下放置图片，可以直接通过图片名引用：

<img src="/logo.png" alt="Logo">

3. 使用Vue CLI的<img>标签指令：

<img :src="imagePath" alt="Logo">

import { ref } from 'vue';
export default {
  setup() {
    const imagePath = ref('logo.png');
    return { imagePath };
  }
}

4. 使用Vue CLI的静态资源处理（在<script setup>标签中）：

<script setup>
import logo from './assets/logo.png';
</script>
 
<template>
  <img :src="logo" alt="Logo">
</template>

确保图片放置的位置和引用方式与项目结构相匹配。在Vue 3中，推荐使用Vue CLI的静态资源引用方式，这样可以确保在构建时资源能够被正确处理。