상품정렬 기능 만들기 확장성 질문

[김은희]

선생님 질문있뎌염 

더 추가해서 이미지도 넣어볼려고했는데! 

1. 배열에 이미지 링크나 폴더안에 있는거 어떻게 넣나요? 

var products = [
{
id: 0,
price: 70000,
title: 'Blossom Dress'
image : "http://m.perla.co.kr/web/product/big/202012/b2e5e7bdd3790dab5f2f70054197f8dd.jpg"
},
{
id: 1,
price: 50000,
title: 'Springfield Shirt'
image : "http://m.perla.co.kr/web/product/big/202012/b2e5e7bdd3790dab5f2f70054197f8dd.jpg"
},

]

이런식으로 넣어봤는데 에러가 났어요!!! 그리고 폴더에 있는 이미지도 그냥 적어줬는데 안된대요 

검색해도 안나와서 여쭤봅니댜 그리고 

저거를 

 

for (let i = 0; i < products.length; i++) {

let templete = `<div class="card">
<span style="color: #ff0000;"><img src={${products[i].iamge}}/></span>
<div class="card-body">
<h5 class="title">${products[i].title}</h5>
<p>가격 : <span class="price">${products[i].price}</span></p>
<button class="btn btn-danger">주문하기</button>
</div></div>`;

// $('.cardhw').html('');
$('.card-group').append(templete);

console.log(templete)

}

 

여기에 넣어가지고 데이터 수대로 카드가 생성되게 하고 

이미지도 쏙쏙 들어가게 코딩해볼려구했는데 이미지

넣고 html에 이미지 쏙 넣는거를 어떻게 해야할지 모르겠어요 

딴건 다 됐는데 저거만 안되서 찾아봤는데 안나와서 

질문올려용 

[codingapple]

img src="이미지경로" 에 넣으면 됩니다

iamge는 오타같군요 

[김은희]

var products = [
{
id: 0,
price: 70000,
title: 'Blossom Dress'
img src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS--hotEzO2mck4BLja6onoVXd2wHaInILn0A&usqp=CAU"
},

 

 

이렇게 넣어야된다는 말씀이신가요???? 

products[i].title 하면 각자 다른 제목 들어가는 것 처럼 

이미지도 다른 링크를 데이터 배열에 넣고 뽑아서 넣으려고했거든요!! 

[codingapple]

데이터를 바꾸는게 아니라 데이터를 <img src="이미지경로"> 여기에 넣으면 됩니다 

[글쓴이]

글