vue 图片路径 “@/assets“ 报错问题及解决

针对 “vue图片路径 @/assets 报错问题” 进行一下详细的讲解和解决攻略。

问题描述

在使用 Vue 开发中，当需要引入项目中的图片时，可能会遇到以下的报错：

./src/views/Home.vue Module not found: Error: Can't resolve '@/assets/images/name.png' in 'D:\project\vue\my-project\src\views'

这个报错的意思是：无法解析路径 @/assets/images/name.png 。其中的 @ 符号是 VueCLI 3.x 以上版本中默认的一个别名，指向的是 src 文件夹的路径，即 ./src 。

问题原因

这个报错的原因是在引入图片时，在路径中使用了 @/assets 作为图片的相对路径，但在项目中并没有这个路径存在。

解决方法

1. 使用相对路径

在路径中使用相对路径来引入图片，例如在 Home.vue 文件中引入一张图片，可以使用以下的代码：

<template>
  <img :src="require('@/assets/images/name.png')" alt="图片名称">
</template>

这里使用的是 require 方法来引入图片，前面需要加上 @ 符号。

2. 修改 vue.config.js

如果需要频繁使用 @/assets 的路径，可以在项目中的 vue.config.js 文件中配置别名，来简化路径的书写。

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@assets': '@/assets'
      }
    }
  }
}

这里将 @/assets 指向了 ./src/assets 的路径。使用时可以这样引入：

<template>
  <img :src="require('@assets/images/name.png')" alt="图片名称">
</template>

示例说明

示例1

在 Home.vue 文件中引入 ./assets/images/avatar.png 图片：

<template>
  <img :src="require('@/assets/images/avatar.png')" alt="头像">
</template>

示例2

在 Login.vue 文件中引入 ./assets/images/logo.png 图片：

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

以上就是关于 “vue图片路径 @/assets 报错问题及解决”的完整攻略了，希望对您有所帮助。