我正试图在我的一个页面中查看图像。我正在使用最新的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" />
并且'static'src变为：
<img src="/_nuxt/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
所以为了使它工作，我不得不放弃到最初的“@”并用“_nuxt”代替它：
<img :src="'_nuxt/assets/images/projects/' + project.image" width="50px" />
好的，很好，但是......为什么？
这样做：<img :src="require('@/assets/images/projects/' + project.image)"/>
vuejs中有几个资产URL转换规则。这是其中之一：
如果URL以@开头，则它也被解释为模块请求。如果你的webpack配置有@的别名，这很有用，在vue-cli创建的任何项目中默认指向/ src
有关更多信息：Asset URL
您正在使用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以这种方式处理的资产的最终名称几乎是不可能的。它也与反引号一起工作：
<img :src="require(`@/assets/images/projects/` + project.image)" width="100px" />
多谢你们！