db.json 안에 이미지 아래 본문 처럼 바꾸면 랜덤으로 나옵니... - 인프런

Nuxt.js 시작하기

상품 목록 표시 기능 구현

db.json 안에 이미지 아래 본문 처럼 바꾸면 랜덤으로 나옵니다.

작성

498

{
      "id": 0,
      "name": "Refined Fresh Chicken",
      "price": "209.00",
      "imageUrl": "https://picsum.photos/id/{id}/640/480"
    },

return {
      products: data.map(item => ({ ...item, imageUrl: item.imageUrl.replace('{id}', Math.floor(Math.random() * 30)) }))
    }

vue.js nuxt.js ssr

답변 3

dh.kang

    imageUrl: `https://picsum.photos/id/${Math.floor(
      Math.random() * 30
    )}/640/480`,

장기효(캡틴판교)

지식공유자

아 그렇군요. 감사합니다 :)

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

db.json 파일에서 이미지의 URL을 랜덤으로 변경하는 코드를 보여주셨네요.

이 코드는 db.json 파일의 “imageUrl” 값을 랜덤으로 변경해서 반환합니다. Math.random() 함수를 사용하여 0부터 29까지의 랜덤한 숫자를 얻고, “imageUrl”의 “{id}” 부분을 이 숫자로 대체합니다. 이후 맵 함수를 사용하여 각 항목에 변경된 “imageUrl” 값을 추가합니다.

이렇게 하면 db.json 파일에서 각 상품의 이미지가 랜덤으로 선택된 이미지로 변경되게 됩니다.

더 필요한 정보가 있다면 언제든지 물어보세요!

인프런 커뮤니티 질문&답변

db.json 안에 이미지 아래 본문 처럼 바꾸면 랜덤으로 나옵니다.