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>

Hardcoded img可以工作但是已经神奇地改为随机文件名，但是我的动态绑定img不起作用，因为它没有像静态文件那样被改变。我需要做些什么才能使动态绑定图像使用正确的修改源？

Answer 1

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

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

<强>一些文件与 - 全图像paths.ts

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

Webpack将分析并替换它，并且您的绑定将获得替换的名称。无论哪种方式 - 在代码中的某个地方，您需要直接引用该文件，以便您可以让webpack将其包含在捆绑包中。

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

他们实际上在捆绑之外，您可以以任何您喜欢的方式参考它们。对于少数和小图像来说相当无害，但是当有很多图像时，它们不是你想要的东西..

Aurelia Webpack图片未加载

1 个答案: