vue访问图像

问题描述 投票:0回答:4

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

好的,很好,但是......为什么?

vue.js nuxt.js
4个回答
1
投票

这样做:<img :src="require('@/assets/images/projects/' + project.image)"/>


0
投票

VueJs

vuejs中有几个资产URL转换规则。这是其中之一:

如果URL以@开头,则它也被解释为模块请求。如果你的webpack配置有@的别名,这很有用,在vue-cli创建的任何项目中默认指向/ src

有关更多信息:Asset URL


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已经完成,它不会转换您的路径。

有几种方法可以解决这个问题:

  1. 正如您所发现的那样:使用静态运行时路径(由webpack处理)将起作用。失败的是,如果你改变你构建项目的方式,你需要更新所有引用(在你的情况下_nuxt)。注意:如果使用vue.cli,通常会得到一个名为static的文件夹,该文件夹完全用于此目的。
  2. 使用绑定,但绑定到运行时路径。这具有与上述相同的缺点以及以下内容:webpack具有cache-busting技术,可以破坏文件名,因此了解webpack以这种方式处理的资产的最终名称几乎是不可能的。

0
投票

它也与反引号一起工作:

<img :src="require(`@/assets/images/projects/` + project.image)" width="100px" />

多谢你们!

© www.soinside.com 2019 - 2024. All rights reserved.