Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by luisgomez7
luisgomez7
5,557 Points

My Javascript project isn't displaying the images I want it to but I don't see what's wrong with it.

I'm working on the project explained in the following video: https://teamtreehouse.com/library/display-an-array-of-objects-on-the-page-one-solution. My code looks identical that of the instructor's but the pet pics won't display on the web page. Please help me find my mistake.

const pets = [
  {
    name: 'Joey',
    type: 'Dog',
    breed: 'Australian Shepherd',
    age: 8,
    photo: 'img/aussie.jpg'
  },
  { 
    name: 'Patches',
    type: 'Cat',
    breed: 'Domestic Shorthair',
    age: 1,
    photo: 'img/tabby.jpg'
  },
  { 
    name: 'Pugsley',
    type: 'Dog',
    breed: 'Pug',
    age: 6,
    photo: 'img/pug.jpg'
  },
  { 
    name: 'Simba',
    type: 'Cat',
    breed: 'Persian',
    age: 5,
    photo: 'img/persian.jpg'
  },
  { 
    name: 'Comet',
    type: 'Dog',
    breed: 'Golden Retriever',
    age: 3,
    photo: 'img/golden.jpg'
  }
];```

```Javascript
let html = '';

for ( let i =0; i < pets.length; i++) {
  let pet = pets[i];
  html += `
    <h2>${pet.name}</h2>
    <h3>${pet.type} | ${pet.breed}</h3>
    <p>Age: ${pet.age}</p>
    <img src="{pet.photo}" alt"${pet.breed}">
`;
}
document.querySelector('main').insertAdjacentHTML('beforeend', html);```

1 Answer

jb30
jb30
44,806 Points

Try changing <img src="{pet.photo}" alt"${pet.breed}"> to <img src="${pet.photo}" alt="${pet.breed}"> with a $ before the { for the image source and a = after alt to set the alternate text.

luisgomez7
luisgomez7
5,557 Points

Thanks, that did the trick!