Aurelia,webpack和动态参考图像

Question

假设我们有这样的标记(多个tbody,我知道).

<tbody repeat.for="order of orders">
  <tr repeat.for="line of order.lines">
    <td>
      <img if.bind="order.urgent === 'T'" src="../app/alert.svg">
      <img if.bind="line.outOfSquare" src="../app/oos.svg">
    </td>
    <td class="min-width">
      <img src.bind="'../app/'+line.type+'.svg'" alt="${line.type}">
    </td>
  </tr>
</tbody>

在由dotnet new Aurelia图像创建的默认项目中,内联为DataUrls,因为它们很小.这是合理的,但根据绑定数据,它们在许多行中重复.调整webpack.config.js将阈值降低到1024字节,我们有

{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=1024' }

现在,图像在wwwroot/dist中显示为带有散列名称,并且URL被重写.计算的URL目标也通过添加到webpack.config.js捆绑在一起

  ,new GlobDependenciesPlugin({
    "boot": [
      "ClientApp/app/components/**/*.svg"
    ]
  })

不幸的是,计算的URL不会被重写.

src.bind="'../app/'+line.type+'.svg'"

他们现在坏了.

如何在运行时解析应用程序相对路径？

我们需要在运行时解决这个问题,但到目前为止我找不到任何支持.已经提出了各种可能性:

• 完全禁止处理图像并使用构建任务打包它们
• 使用require在运行时转换URL
• 使用一个隐藏的div,其中包含带有静态URL的imgs和原始URL作为id值,然后使用它们在运行时进行映射.

我自己的研究表明有一些webpack插件以json的形式发出这些映射,但是我对Aurelia构建过程的浅层理解不允许我利用它 - 除了其他任何我不知道如何导致这个输出提供给申请.

这似乎相关,但无知妨碍了我.如何使用webpack文件加载器加载图像文件

我尝试使用require不起作用,但我怀疑Aurelia模块中自动在范围内的require方法不是可能解决映射的Webpack要求.据推测,webpack在运行时可用于加载和解码打包的应用程序,但我真的不知道,因为到目前为止它刚刚起作用,允许我在幸福的无知中运行.

我知道我可以通过使用对资源的静态引用分别处理每个行类型来将其嵌入到页面中,如下所示:

<img if.bind="line.type === 'AL'" src="../app/al.svg">
<img if.bind="line.type === 'GD'" src="../app/gd.svg">

但这是高维护代码.

另一种可能性是走另一条路.借用建议来放置一个充满imgs的隐藏div,如果这些都是内嵌的,那么可以用绑定来复制图像.

Answer 1

有了它们，require.context您可以告诉webpack捆绑与某个特定模式匹配的所有文件，然后使用创建的上下文在运行时动态解析其路径。

使用单一上下文和长路径解析所有图像

假设您有一个src/assets/images包含所有图像的文件夹。其中一张图片被命名为image-1.jpg。您可以创建如下文件src/images.js：

const imageContext = require.context(
  ".",
  true,
  /^\.\/.*\.(jpe?g|png|gif)$/i
);
export { imageContext };

此上下文将（递归）包括下的所有图像src。然后，例如在中app.js导入并使用它来解析图像：

import { imageContext } from "./images";

export class App {
    constructor() {
        this.img = imageContext("./assets/images/image-1.jpg"); 

        // resolved: '/src/assets/images/image-1.f1224ebcc42b44226aa414bce80fd715.jpg'
    }
}

<img src.bind="img">

解析特定文件夹中的图像，短路径

注意：传递给上下文以解析图像的路径必须相对于声明它时传递给上下文的路径。因此，如果您有src/assets/images.js这样的情况：

const imageContext = require.context(
  "./images",
  true,
  /^\.\/.*\.(jpe?g|png|gif)$/i
);
export { imageContext };

然后，src/app.js您可以这样做：

import { imageContext } from "./images";

export class App {
    constructor() {
        this.img = imageContext("./image-1.jpg"); 

        // resolved: '/src/assets/images/image-1.f1224ebcc42b44226aa414bce80fd715.jpg'
    }
}

加载具有特定图案的所有图像

如果为要一起显示的每组图像创建一个上下文，它将变得更加容易：

src / pages / album / album.js：

const ctx = require.context(
  "../../assets/images",
  true,
  /^\.\/.*some-special-pattern.*\.(jpe?g|png|gif)$/i
);

export class Album {
    constructor() {
        this.images = ctx.keys().forEach(imageContext);
    }
}

<img repeat.for="img of images" src.bind="img">

让Aurelia做一些魔术

创建一个ValueConverter例如：

src /资源/转换器/image-context.js：

const imageContext = require.context(
  "../../",
  true,
  /^\.\/.*\.(jpe?g|png|gif)$/i
);

export class ImageContextValueConverter {
    toView(name) {
        const key = imageContext.keys().find(k => k.includes(name));
        return imageContext(key);
    }
}

src / resources / index.js

import { PLATFORM } from "aurelia-pal";

export function configure(config) {
    config.globalResources([
        PLATFORM.moduleName("resources/converters/image-context")
    ]);
}

然后在其他任何地方，例如，获取src / assets / images / image-1.jpg：

<img src.bind="'image-1' | imageContext">

网址加载器问题

当我尝试在项目中执行此操作时，遇到了问题，url-loader无法正常工作。最新的webpack版本破坏了url-loader之类的感觉，因为它也忽略了该limit选项。我不得不完全抛弃URL加载器来处理图像。如果/当我开始工作时，我将更新我的答案。