Aurelia Webpack 图像未加载

Question

我有一个奇怪的问题，如果我对它进行硬编码，我可以看到图像，但如果我尝试使用 aurelia 绑定函数，它将不起作用。

html 模板

<template>
...
<img src="${imageURL}" />
<img src="../images/image1.jpg" />
...
</template>

这呈现为

<html>
...
<img class="au-target" au-target-id="7" src="../images/image1.jpg"> (not working)
<img src="/a6c7e3f2e070b21f54eeb86ac5b0eb08.jpg"> (working)
...
</hmtl>

硬编码 img 有效，但已神奇地更改为随机文件名，但我的动态绑定 img 不起作用，因为它没有像静态图像那样被更改。我需要做什么才能使动态绑定图像使用正确的修改源？

Answer 1

Webpack 静态分析文件引用并将其替换为包引用，如您所见。

您要么需要在您的源代码中有一些地方您确实有对文件名的硬引用，然后绑定到那个地方：

some-file-with-all-image-paths.ts

export const paths = {
    image1: '../images/image1.jpg'
};

Webpack 会照原样分析和替换它，你的绑定会得到替换后的名字。无论哪种方式 - 在您的代码中的某个地方，您需要直接引用该文件，以便您可以让 webpack 将其包含在包中。

或者，如果您必须动态引用您的图像（参数化或从外部源加载等），或者如果由于某些其他原因它不起作用，您可以使用 copy-webpack-plugin 并将所有图像简单地复制到输出文件夹。

它们实际上位于捆绑包之外，您可以按照自己喜欢的任何方式引用它们。对少数和小图像相当无害，但当图像很多时就不是你想要的了..

Aurelia Webpack 图像未加载

Aurelia Webpack Image not loading

webpack

aurelia