在 Vue 中添加图片，助力精彩内容呈现实境

2023-12-14 19:32:01

引言

在当今注重视觉效果的数字世界中，图片已经成为内容中必不可少的一部分。对于 Vue 开发者而言，在项目中引入静态图片是再常见不过的操作。为了满足这一需求，Vue 提供了两种便捷的方式：require 和 import。本文将详细介绍这两种方法，并通过对比分析，帮助您选择最适合您的方法。同时，我们还将提供实用的示例代码和演示图像，让您轻松上手，将图片引入 Vue 项目，使内容更加丰富多彩。

方法一：require - 简单直接，省去繁琐

require 是 Vue 中引入静态图片最简单直接的方式。其语法简洁，易于理解，即使是 Vue 初学者也能轻松掌握。

语法：

require('../assets/image.png')

使用方法：

将图片文件放在项目的 assets 文件夹中。
在需要引入图片的组件中，使用 require 语法引入图片。
将图片路径作为参数传递给图片标签的 src 属性。

示例代码：

<template>
  <img :src="require('../assets/image.png')" alt="Image">
</template>

<script>
export default {
  data() {
    return {
      // 省略其他数据
    }
  }
}
</script>

方法二：import - 模块化管理，提升可读性

import 是 Vue 中引入静态图片的另一种方式。与 require 相比，import 更加模块化，可以更清晰地管理项目中的图片资源。

语法：

import image from '../assets/image.png'

使用方法：

将图片文件放在项目的 assets 文件夹中。
在需要引入图片的组件中，使用 import 语法引入图片。
将图片变量作为参数传递给图片标签的 src 属性。

示例代码：

<template>
  <img :src="image" alt="Image">
</template>

<script>
import image from '../assets/image.png'

export default {
  data() {
    return {
      // 省略其他数据
    }
  }
}
</script>

方法对比：require vs import

特性	require	import
语法	`require('../assets/image.png')`	`import image from '../assets/image.png'`
图片路径	相对于当前组件的文件路径	相对于项目根目录的文件路径
模块化	不支持	支持
可读性	较低	较高