博客

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

  • Post category:http

“@/assets”是vue-cli脚手架中默认的图片路径。使用这个路径可以让开发者更方便地引用本地图片资源。但有时会遇到在使用“@/assets”路径时报错的问题，这通常是由于路径引用错误或图片资源不存在导致的。以下是解决这个问题的完整攻略：

错误现象

当使用“@/assets”路径引用本地图片资源时，会报“Module not found”错误，如下所示：

Failed to compile.

./src/components/HelloWorld.vue
Module not found: Error: Can't resolve '@/assets/imgs/logo.png' in 'D:\Projects\project1\src\components'

解决方案

  1. 确认文件路径

在使用“@/assets”路径时，确保文件路径正确，避免出现引用错误的情况。例如，如果要引用“logo.png”文件，需要将该文件存放在“src/assets/imgs”目录下，确保路径为“@/assets/imgs/logo.png”。

  1. 检查文件名称和后缀

确保要引用的图片文件名称和后缀都正确，避免出现引用错误的情况。例如，如果要引用“logo.png”文件，需要确保该文件名称和后缀都正确。

示例解释

示例一

在使用“@/assets”路径时，如果文件路径不正确，就会出现无法找到资源的错误。例如，以下代码会报错：

<template>
  <img :src="'@/assets/imgs/logo.png'" alt="logo">
</template>

若“logo.png”文件存放在“src/assets/images”目录下，则正确的路径应为“@/assets/images/logo.png”。修改代码如下：

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

示例二

当使用“@/assets”路径引用图片时，如果图片的名称或后缀不正确，也会出现资源无法找到的错误。例如，以下代码会报错：

<template>
  <img :src="'@/assets/imgs/logo.jpeg'" alt="logo">
</template>

由于“logo.jpeg”文件不存在，因此会报错。若要引用“logo.png”文件，正确的代码如下：

<template>
  <img :src="'@/assets/imgs/logo.png'" alt="logo">
</template>
Tags: