Vue.js vue访问图像_Vue.js_Nuxt.js

Vue.js vue访问图像

vue.js

Vue.js vue访问图像,vue.js,nuxt.js,Vue.js,Nuxt.js,我试图在我的一个页面中查看图像。我正在使用最新的node express vue nuxt babel设置。我的最终目标是： <img :src="'@/assets/images/projects/' + project.image" width="50px" /> 我从上面开始，但我得到了404。所以我试着用一个特定的图像： <img src="@/assets/images/projects/5a2db62e346c1.jpg" width="50px" />

我试图在我的一个页面中查看图像。我正在使用最新的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在控制台中，页面加载正常，没有错误，但没有图像迹象。检查这些元素时，我注意到dynamic:src变成了：

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

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

“静态”src变为：

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

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

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

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

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

如果URL以@开头，它也会被解释为模块请求。如果您的网页包配置有@的别名，则此选项非常有用，默认情况下，该别名指向vue cli创建的任何项目中的/src

有关详细信息：

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

如果URL以@开头，它也会被解释为模块请求。如果您的网页包配置有@的别名，则此选项非常有用，默认情况下，该别名指向vue cli创建的任何项目中的/src

有关详细信息：

您正在使用

webpack

捆绑应用程序

在非常高的级别上，webpack查找

require

，并负责绑定脚本。确切的含义取决于您的具体配置，但它通常将所有js文件收集在一个文件中，通常缩小并删除未使用的代码

网页包不限于

js

文件。通过使用插件，它可以处理从中提取图像、从中加载资源等等

它最终加载图像的方式仍然是使用

require

，插件只是插入所有内容，以便

webpack

能够处理它们。也就是说，

require

是一个编译时功能，如果在编译时无法确定路径，

webpack

将无法工作

Webpack

通常会将图像路径转换为运行时可用的路径（通常它们不同，并且取决于您的Webpack配置）

当您像这样绑定

src

时：

：src=“@/assets/images/projects/'+project.image”

无法在编译时确定路径，因此

vue

将在运行时解析路径，但webpack已经完成，它不会转换您的路径

有两种方法可以解决这个问题：

正如您所发现的：使用webpack不处理的静态运行时路径将起作用。缺点是，如果您更改了构建项目的方式，则需要更新所有引用（在您的情况下是

\u numxt

）。注意：如果使用vue.cli，通常会得到一个名为

static

的文件夹，该文件夹正好用于此目的

使用绑定，但绑定到运行时路径。这有着与上面相同的缺点，也有以下缺点：

webpack

有一些会损坏文件名的技术，因此知道通过

webpack

以这种方式处理的资产的最终名称几乎是不可能的