Image 404 on detail page with dynamic parameter

Frontend Web Development: The Big Nerd Ranch Guide Chapter 23: Views and Templates
1

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:

cryptids/assets/images/cryptids

while the images were truly contained in this directory:

assets/images/cryptids

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.

2

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}}">
    <h3>{{model.name}}</h3>
</div>
3

Ooh. Good catch. Thank you.