inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Bắt đầu với Nuxt.js

Thực hiện chức năng hiển thị danh sách sản phẩm

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

603

geuni

11 câu hỏi đã được viết

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

Câu trả lời 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

623

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