1. 项目结构概述

在开始之前，我们需要了解Vue项目的常见结构。一个典型的Vue项目通常包含以下目录：

  • assets：存放静态资源，如图片、字体等。
  • components：存放自定义组件。
  • public：存放公共资源，如index.html等。

2. 添加图片到项目中

2.1 使用assets目录

步骤：

  1. 将图片文件放入src/assets目录。
  2. 在Vue组件中引用图片。

代码示例：

<template>
  <div>
    <img src="@/assets/image.png" alt="Example Image">
  </div>
</template>

在上述代码中，@符号是一个别名，它指向src目录。这样，你可以更方便地在组件中引用项目中的文件。

2.2 使用public目录

步骤：

  1. 将图片文件放入public目录。
  2. 在Vue组件中引用图片。

代码示例：

<template>
  <div>
    <img src="/image.png" alt="Example Image">
  </div>
</template>

2.3 使用CDN

步骤：

  1. 在public/index.html中添加以下代码：
<img src="https://example.com/image.png" alt="Example Image">

3. 图片路径问题

在使用Vue CLI创建的项目中，路径问题通常是由于别名设置不当引起的。确保你的别名指向正确的目录。

代码示例：

// 在main.js中设置别名
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 设置别名
  routes: [
    // ...其他路由配置
  ]
})

4. 总结