我正在尝试在我的页面之一中查看图像。我正在使用最新的node-express-vue-nuxt-babel设置。我的最终目标是：
<img :src="'@/assets/images/projects/' + project.image" width="50px" />
我从上面开始，但是得到了404。所以我尝试了一个特定的图像：
<img src="@/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
可以，但是回到动态源却没有，
to <img :src="'@/assets/images/projects/5a2db62e346c1.jpg'" width="50px" />
足以再次产生404。 404位于控制台中，页面加载正常，没有错误，但没有图像迹象。检查元素使我注意到动态的：src变成了：
<img src="@/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
和“静态” src变为：
<img src="/_nuxt/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
因此，要使其正常运行，我必须放弃首字母“ @”，然后将其替换为“ _nuxt”：
<img :src="'_nuxt/assets/images/projects/' + project.image" width="50px" />
好，但是..为什么？
答案 0 :(得分：1)
执行此操作：<img :src="require('@/assets/images/projects/' + project.image)"/>
答案 1 :(得分：0)
vuejs中有几个资产URL转换规则。这是其中之一：
如果URL以@开头，则它也被解释为模块请求。如果您的webpack配置中有@的别名，则该选项很有用，默认情况下，该别名指向vue-cli创建的任何项目中的/ src
有关更多信息：Asset URL
答案 2 :(得分：0)
您正在使用webpack捆绑应用程序。
在一个非常高级的Webpack上，它会寻找require并负责捆绑脚本。确切的说，这取决于您的特定配置，但是它通常将所有js文件收集到一个文件中，通常会缩小并删除未使用的代码。
Webpack不仅限于js个文件。通过使用插件，它可以处理从html files提取图像，从urls和很多more加载资源。
使用require仍然可以最终加载图像，插件只需插入所有内容，以便webpack可以处理它们。话虽这么说，require是编译时的功能，如果无法在编译时确定路径，webpack将无法正常工作。 Webpack通常会将图像路径转换为运行时可用的路径（通常它们是不同的，并且取决于您的webpack配置）。
当您像这样绑定src时：
：src =“'@ / assets / images / projects /'+ project.image”
无法在编译时确定路径，因此vue将在运行时解析该路径，但是webpack已经完成，并且不会转换您的路径。
有两种方法可以解决此问题：
_nuxt）。注意：如果使用vue.cli，通常会得到一个名为static的文件夹，该文件夹正是为此使用的。webpack具有cache-busting技巧来处理文件名，因此实际上知道由webpack处理的资产的最终名称实际上是不可能。答案 3 :(得分：0)
它也适用于反引号：
<img :src="require(`@/assets/images/projects/` + project.image)" width="100px" />
谢谢大家！