Aurelia - Displaying Static Image

Question

I'm just getting started with Aurelia and I'm having a difficult time including static images when I run my application (in dev). Ie I have an img tag with a src pointing to where the image is located in my folder structure, but I continually get a 404 when it's requested. I have the image referenced in the src attribute of my image tag located in the root of my application, but it's not available when I run my app.

<div id="profile-pic">
  <img src="./profilepic.jpg" />
</div>

Do I need to modify my aurelia.json file or something?

Answer 1

The URL to an image is relative to the page, not to your view. So construct the link as if you were linking to it like that. Typically, your page is index.html and is located at the root of your project, alongside the src folder. Thus, when you link to an image located inside the src folder, you have to include src in the path. Thus the following directory structure:

my-project
|- index.html
|
 \src
 |-app.js
 |-app.html
 |-profilepic.jpg

Will require you to use <img src="src/profilepic.jpg" /> in your views.

That being said, I would recommend creating a separate folder with your static images in it. This will make it plain that these images are not part of your application source files, but are supporting image content. You might name this folder images and place it in the root of your project, alongside the src folder.

my-project
|- index.html
|\images
| |-profilepic.jpg
|
 \src
 |-app.js
 |-app.html

Then you would use <img src="images/profilepic.jpg" /> in your views.