Aurelia Webpack图片加载异常：硬编码正常，绑定功能失效

嘿，我之前在Aurelia项目里也碰到过一模一样的问题，这其实是打包工具（比如Webpack）和Aurelia动态绑定的路径处理逻辑冲突导致的，我来帮你拆解原因和解决办法：

问题到底出在哪？ #

你看，当你硬编码写<img src="../images/image1.jpg"时，Webpack这类打包工具会自动扫描到这个静态资源，把它复制到打包后的输出目录，同时把路径替换成带哈希的文件名（就是你看到的/a6c7e3f2e070b21f54eeb86ac5b0eb08.jpg），所以这个图片能正常加载。

但用Aurelia的插值绑定${imageURL}时，打包工具没办法提前解析这个动态生成的路径——它不知道imageURL最终会指向哪个文件，所以只能原样输出你写的相对路径../images/image1.jpg，而这个路径在打包后的项目结构里根本不存在，自然就加载失败了。

两种靠谱的解决方案 #

方案1：在ViewModel中导入图片资源（推荐） #

这是最通用的方式，不管你是单张图片还是动态切换多张图片都适用。在对应的ViewModel文件里，先把图片作为模块导入，再把导入的变量绑定到模板：

// 比如你的view-model.js文件
import image1 from '../images/image1.jpg';

export class YourViewModel {
  // 把导入的图片路径赋值给绑定变量
  imageURL = image1;
}

然后模板里保持原来的绑定写法就行：

<template>
  <img src="${imageURL}" />
</template>

这样打包工具会正确识别这个图片资源，把它的哈希路径赋值给imageURL，绑定后渲染出来的就是正确的可访问路径。

方案2：用Aurelia的require属性（仅Aurelia 1适用） #

如果你用的是Aurelia 1，可以用框架自带的require属性来告诉打包工具处理这个图片：

<template>
  <img src.bind="imageURL" require="../images/image1.jpg" />
</template>

不过这种方式更适合固定单张图片的场景，要是你需要动态切换不同图片，还是方案1更灵活。

额外提醒 #

• 确保你的打包配置里正确配置了图片资源的处理规则（比如Webpack的asset-module或者file-loader），这是打包工具能正确处理图片的前提。
• 尽量避免在绑定里直接写相对路径，因为打包后的项目结构和开发时的结构大概率不一样，相对路径很容易出错。

内容的提问来源于stack exchange，提问作者John Petrak