vue访问图片

Question

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

“静态”源代码变成：

<img src="/_nuxt/assets/images/projects/5a2db62e346c1.jpg" width="50px" />

所以为了让它发挥作用，我不得不放弃最初的“@”并用“_nuxt”代替它：

<img :src="'_nuxt/assets/images/projects/' + project.image" width="50px" />

好的，很好，但是.. 为什么？

Answer 1

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

Answer 2

VueJs

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

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

欲了解更多信息：Asset URL

Answer 3

您正在使用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 以这种方式处理的资产的最终名称几乎是不可能的。

Answer 4

它也适用于反引号：

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

谢谢大家！