Setting path of images folder in Aurelia

Question

I have SVG images in a folder, at location

src/resources/images/

In one of the views I added an img tag and set the src accordingly

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

For, I am sure, a very simple reason, I get an error when running the application au run

The console error:

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

What am I missing... Is this something specific to Aurelia Configuration?

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

All aurelia's paths is related to root folder (there is saved index.html file).

Simple solution: you can direct create \images\ folder in root dir and place your files there.

Hard solution: you can create bundle task and copy files from resources to output folder like \images\. Read that post for example task.

edited May 23 '17 at 12:10

Community

1
1

answered Sep 27 '16 at 22:04

JayDi

1,037
15
24

Thanks! The simple solution was quick. Next step is that bundle task. – Flippie Coetser Sep 28 '16 at 06:59

SnapJosh · Answer 2 · 2017-03-23T15:04:49.470

Note (edit): This works with the cli version. If you are using jspm, you should not need any special management of the library (see my comment for details).

Based on JayDi's really nice FontAwesome work mentioned above, I created the following that I will leave here for those who don't yet fully understand what this is doing or how it works:

In your \aurelia_project\tasks folder, create a file called prepare-images.js and add the following code:

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;
}

Then, in your \aurelia_project\tasks\build.js folder add the following lines of code:

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
);

You can now place your images in your folder (e.g. /src/resources/images), and they will be available in your build project at /scripts/images/your_file_name.

That didnt work at all for me. I dont have an `aurelia_project\tasks` folder, but I do have an `aurelia_project\build\tasks` folder (I've cloned from `skeleton-navigation/skeleton-esnext/` ) — Trondh, Mar 22 '17 at 08:52
If you have `aurelia_project\build\tasks` instead of `aurelia_project\tasks` then you are probably not using the cli? If you are not using the cli, you are probably using jspm? In a previous build that I created pre-cli and using jspm, I was able to just install font-awesome via jspm. Nothing special required. I just added `` to the head of my index.html file. Hopefully this helps you out. — SnapJosh, Mar 22 '17 at 14:37

Setting path of images folder in Aurelia

2 Answers2