在 Aurelia 中设置图像文件夹的路径

Question

我的文件夹中有 SVG 图像，位于某个位置

src/resources/images/

在其中一个视图中，我添加了一个img 标签并相应地设置了src

<img src="images/image.svg">

因为，我敢肯定，一个非常简单的原因，我在运行应用程序时遇到错误au run

控制台错误：

Failed to load resource: the server responded with a status of 404 (Not Found). http://127.0.0.1:9000/images/image.svg

我错过了什么... 这是 Aurelia 配置特有的吗？

Answer 1

所有 aurelia 的路径都与根文件夹相关（有保存的index.html 文件）。

简单的解决方案：您可以直接在根目录创建\images\ 文件夹并将您的文件放在那里。

硬解：您可以创建捆绑任务并将文件从资源复制到输出文件夹，例如\images\。阅读that post for example task。

Answer 2

注意（编辑）：这适用于 cli 版本。如果您使用的是 jspm，则不需要对库进行任何特殊管理（有关详细信息，请参阅我的评论）。

基于上面提到的 JayDi 非常出色的 FontAwesome 作品，我创建了以下内容，我将留在这里给那些还没有完全理解它在做什么或它是如何工作的人：

在您的\aurelia_project\tasks 文件夹中，创建一个名为prepare-images.js 的文件并添加以下代码：

import gulp from 'gulp';
import merge from 'merge-stream';
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';

export default function prepareImages() {
  const taskImages = gulp.src( 'src/resources/images/*' ) //use the file path to your image folder (this is where I put mine)
    .pipe( changedInPlace( { firstPass: true } ) )
    .pipe( gulp.dest( `${project.platform.output}/images` ) );

  return taskImages;
}

然后，在您的 \aurelia_project\tasks\build.js 文件夹中添加以下代码行：

import project from '../aurelia.json';
import prepareFontAwesome from './prepare-font-awesome';    
import prepareImages from './prepare-images'; //add this line

export default gulp.series(
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS,
    prepareFontAwesome,
    prepareImages  //add this line
  ),
  writeBundles
);

您现在可以将图像放在您的文件夹中（例如/src/resources/images），它们将在您的构建项目中可用，地址为/scripts/images/your_file_name。