Aurelia（.NET模板）与Webpack：动态图片引用问题

Alright, let's break down why your dynamic image references are throwing errors and walk through the fixes step by step. I've dealt with this exact issue in Aurelia projects bootstrapped via dotnet new Aurelia, so this should get you sorted.

Why This Happens #

Webpack works by statically analyzing your code during bundling to find and include assets like images. When you use dynamic string paths (like src.bind="'../app/'+line.type+'.svg'") or conditional if.bind images, Webpack can't pick up on these assets at build time. That means they don't get copied to your output directory, so the browser can't find them when your app runs.

Fix 1: Use Webpack's require() to Track Assets #

The simplest fix is to wrap your image paths in Webpack's require() function. This tells Webpack to resolve the path during bundling, copy the image to your build folder, and replace the path with the correct bundled URL. Here's how to update your template:

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

For the dynamic line.type path, Webpack will include all .svg files in the ../app/ directory (since it can't predict all possible line.type values at build time). Just make sure this directory only contains the SVGs you need to avoid bundling extra files.

Fix 2: Verify Your Webpack SVG Configuration #

If you haven't already, make sure your Webpack config is set up to process SVG files. Open your project's webpack.config.js and check for a rule like this (if it's missing, add it):

module.exports = {
  // ... other existing config
  module: {
    rules: [
      // ... other rules for JS, CSS, etc.
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

This rule tells Webpack to handle SVG files, rename them with a hash (for cache busting), and output them to an images/ folder in your build directory.

Fix 3: Keep Using src.bind (Alternative Syntax) #

If you prefer sticking with Aurelia's src.bind syntax instead of string interpolation, you can wrap the require() call directly in the binding:

<img src.bind="require('../app/'+line.type+'.svg')" alt="${line.type}">

This works exactly the same way as the interpolation method—just a matter of personal preference.

Quick Tips #

• Double-check your relative paths: Make sure the path from your component's .html file to the SVG is correct. A wrong relative path will still cause errors even with require().
• TypeScript users: If you get type errors for require(), add this declaration to a typings.d.ts file in your project:

  declare function require(path: string): string;
  

内容的提问来源于stack exchange，提问作者Peter Wone