发现问题
今天在做项目的时候发现了一个问题，我在循环一个数组对象导入图片的时候报错了。我的代码是这样的：
一看控制台报错信息是这样的
cellphone.png:1
GET http://localhost:8081/src/assets/images/cellphone.png 404 (Not Found)
大致意思是是在加载cellphone.png这个图片资源时，服务器返回了404错误，表示资源未找到。
图片也出不来
提出问题
问题找到了，该怎么解决呢？是不是我图片的路径错了？
解决问题
尝试了用
<img src="../../src/assets/images/cellphone.png" alt="">
图片是能出来的，说明路径没有错。
这个问题的原因是Vue.js在处理<img src>的路径时，默认使用的是Webpack的资源定位规则。在的情况下，当在路径前使用
我尝试使用相对路径
"../../src/assets/images/cellphone.png"
来定位图片。然而，当Vue.js尝试加载这个路径时，它可能无法找到图片，因为这是相对于当前文件的路径，而不是相对于打包后的应用程序的路径。
当使用
require("../../src/assets/images/cellphone.png")
时，Webpack会将这个路径转换为一个绝对路径，这样Vue.js就能正确地找到并加载图片。
经过更改后图片也能出来了
补充
在许多现代前端项目中，特别是在使用 Vue.js 和其相关的构建工具（如 Vue CLI）时，@ 符号经常被用作一个别名，指向项目的 src 目录。
这样做的目的是为了简化相对路径。假设你的文件结构如下：
如果你在 App.vue 中需要引入 cellphone.png，按照相对路径，需要这样写：
imgPath: require("../assets/images/cellphone.png")
但是，使用 @ 别名可以使这个路径更简洁：
imgPath: require("@/assets/images/cellphone.png")
在 Vue CLI 项目中，你通常会在项目的 Webpack 配置中看到这样的设置，它告诉 Webpack 把 src 目录映射到别名 @。这样做的好处是，无论你在哪个子目录中，都可以使用 @ 来快速引用 src 目录下的资源，从而避免了相对路径的复杂性。
结言
这是我自己在开发项目中遇到的小问题，希望这篇文章能帮到也遇到跟我一样问题的同学！
