我正试图在我的一个页面中查看图像。我正在使用最新的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" />
多谢你们!