inflearn logo
강의

Course

Instructor

Getting Started with Nuxt.js

Implementing product list display function

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

603

geuni

11 asked

2

{
      "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

Answer 3

1

dhkang3048

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

0

captain

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

0

communityai8509

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

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

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

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

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

판교님, 50% 학생 할인 쿠폰

0

131

2

캡틴님 커리어 질문 있습니다

0

75

1

nuxt 최신버전 설치 후 layouts 없어서 직접 폴더 생성 후 문제

1

346

1

vue나 nuxt 새로운 강의는 출시 예정이 없으실까요?

0

185

1

24년 강의를 들으면서 에러나는 부분 정리

2

337

2

공식홈페이지에 설치방법이 바뀐거같아요

1

401

3

layouts폴더와 default.vue에대해서 궁금한 점 있습니다!

1

382

2

자료가 없습니다.

1

284

2

에러 페이지 정의 방법 강의 문의

1

332

2

SSG -> SSR 배포 방식 전환

1

523

2

갑자기 화면에 에러가 나오네요..

1

448

2

마지막 강의까지 작성된 코드

1

293

2

JSON Server Operator 링크에 Operator 가 없습니다.

1

222

2

Vue2 EOL 관련해서..

1

463

2

env.baseUrl 문제

1

622

2

블로그 기능 질문입니다!

1

452

3

node 버전 문제 질문입니다.

1

223

1

폴더구조 다른것 안내 부탁드려요

1

456

1

npm run generate 배포

1

675

2

캡틴판교 선생님 너무 궁금해서 질문드립니다 ㅜ

1

322

2

nuxt.config.js 에서 baseurl 지정하는 방법

2

987

1

axios 설치 후 새로고침 시 에러 발생할 때 해결 방법 입니다.

2

764

2

SSG 배포가 현재 상품,장바구니에는 맞지 않는 배포방식인거죠?

1

382

2

db.json 에 제공되는 imgUrl 서비스가 종료된듯하네요

1

561

3