inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

유튜브 섬네일 따지 않고 사이트의 이미지 주소를 가져오는 것은 어떻게 해야 하나요?

해결된 질문

387

신영현

작성한 질문수 37

1

맛집주소에 유튜브 섬네일이 아닌 블로그 이미지주소를 불러오고 싶은데요,

올려주신 코딩은 유튜브섬네일 따는 자바스크립트가 있어서 헷갈려요 ㅜㅜ

혹시 이미지 주소를 info window img 로 설정하고,

클릭시 블로그 주소로 이동하는 자바스크립트 코딩도 알려주실 수 있나요 ㅜㅜㅜ ...

 

 

유튜브 섬네일 따는 자바스크립트 부분을 지워도 그 외 변경해야 할 것이 많아서 헷갈립니다.. 현재

맛집 클릭시 상세 조회 + 유튜브 섬네일 따기, 지도 중심 이동

강의 보다가 막혔습니다.

// 인포윈도우 가공하기
 return `
 <div class="infowindow">
 <div class="infowindow-img-container">
 <img
 src="${imgUrl}"
 class="infowindow-img"
 />
 </div>
 <div class="infowindow-body">
 <h5 class="infowindow-title">${data.title}</h5>
 <p class="infowindow-address">${data.address}</p>
 <a href="${data.url}" class="infowindow-btn" target="_blank">사이트 이동</a>
 </div>
 </div>
 `;
}

aws git rest-api github javascript HTML/CSS mysql

답변 1

0

Jay

안녕하세요.

유튜브는 영상의 정형화된 URL에서 손쉽게 섬네일을 추출해낼 수 있습니다.

블로그로 커스텀을 원하신다면 그에 맞는 서비스 분석이 필요할 것입니다.

블로그도 종류가 많죠. 네이버, 티스토리, 다음, 깃 등.. 다양한 서비스에서 제공되는 이미지 주소를 추출할 방법을 그에 맞게 짜야합니다.

추천드리는 방법은 해당 사이트의 html 코드를 파싱한 뒤에 meta 태그의 오픈그래프 프로퍼티를 찾아보시는 것입니다.

오픈그래프 속성은 한마디로 SNS에 공유될 때 어떤식으로 보여질 것인가에 대한 메타 속성입니다.

이 속성을 이용하시면 될 것 같습니다. 만약 og:image 속성이 없다면 디폴트 이미지를 제공하는 형식, 또는 기획하신 의도에 맞는 처리를 해주시면 될 것 같습니다.

오픈그래프 속성에 대한 자세한 내용은 아래 링크를 참고하시거나 구글에 meta og 로 검색하시면 될 것 같아요.

 

https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

감사합니다.

0

Jay

img 태그의 srs 속성에 바로 imgurl을 넣어주시면 됩니다.

<img src=`${imgurl}` ~~~ />

 

이런식으로요 !

0

Jay

function getContent(data) {

  // 인포윈도우 가공하기
return `
<div class="infowindow">
    <div class="infowindow-img-container">
      <img
        src="${data.imgurl}" #################################### data.imgurl로 접근
        class="infowindow-img"
      />
    </div>
    <div class="infowindow-body">
      <h5 class="infowindow-title">${data.title}</h5>
      <p class="infowindow-address">${data.address}</p>
      <a href="${data.url}" class="infowindow-btn" target="_blank">사이트 이동</a>
    </div>
  </div>
`;
}

0

Jay

getContent 함수에 data라는 매개변수가 들어옵니다. 여기는 위에 정의해둔 더미데이터가 하나씩 들어오겠죠.

더미데이터는 객체형식으로 되어 있는데,

그 객체에서 imgurl이라는 속성을 꺼내 쓰고 싶은 것이기 때문에,

data.imgurl 로 접근을 해주셔야 합니다!

0

Jay

네! .imfowindow 너비를 원하시는 사이즈로 설정하셔서 조절하시면 될것같아요!

0

신영현

친절한 답변 너무 감사드립니다/.^^

live server가 안 떠요..

0

99

1

카카오맵 API 가 안뜹니다...

0

759

2

카카오맵API 지도 관련

0

184

1

Putty에서 nginx를 vi로 수정할때 오류

0

304

3

mysql과 선생님의 깃허브 코드연결

0

198

1

nodemon 실행오류

0

244

2

Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?

0

281

2

css 적용 중 강의대로 적용되지 않아 질문 드립니다

0

362

2

강의를 잘 활용하는 법 추천 부탁드립니다.

0

293

1

MysqlWorkbench 접속문제

0

313

1

전체 핀이 조회되지 않습니다.

0

270

1

빅데이터 처리관련

1

291

1

섹션5의 2번째 강의 질문-setMap 비동기 처리 이유

0

245

1

PM2 EADDRINUSE 에러

0

416

2

인스턴스 중단 후 재시작

0

292

1

이미지 부분에 cctv 영상을 넣고 싶은데요.

0

596

2

노션 링크가 어디있나요 ?

1

318

1

axios 이후 마커 오류

0

295

0

service nginx restart 에러

0

722

1

섹션10 배포하기 unbuntu에서 root경로가 안뜹니다ㅠㅠ

0

519

3

선생님 추가적으로 새로운 페이지를 만드려고 하는데요...

0

252

1

코드 질문 드립니다!

0

237

1

혹시 강의자료 노션 내리셨나요?

0

244

1

노드몬 에러 참조하세요

0

364

1