Image 404 on detail page with dynamic parameter

After following the book’s instructions on viewing a detail page with a dynamic parameter, the image would not display when attempting to view an individual cryptid.

The console printed a 404 (Not Found) error informing me that it could not find the image.

This was because the image URL was to the following directory:


while the images were truly contained in this directory:


as the book defines on page 427. (I am omitting the public directory since it is the root. Also, the book misses the ‘s’ from ‘images’ when it defines what the directory should be.)

This was fixed when changing the path in router.js as the book defines on page 430 from:

this.route('cryptid', {path: 'cryptids/:cryptid_id'});

to become:

this.route('cryptid', {path: ':cryptid_id'});

I hope this helps anyone with a similar issue.

While that works to display the images, it breaks the URL by removing the cryptids route… here is the correct fix…

Add ../ to the src property in app/templates/cryptid.hbs:

<div class="container text-center">
    <img class="img-rounded" src="../{{model.profileImg}}" alt="{{model.type}}">

Ooh. Good catch. Thank you.