인프런 커뮤니티 질문&답변
작성한 질문수
유튜브 섬네일 따지 않고 사이트의 이미지 주소를 가져오는 것은 어떻게 해야 하나요?
해결된 질문
작성
·
246
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> `;}답변 1
0
안녕하세요.
유튜브는 영상의 정형화된 URL에서 손쉽게 섬네일을 추출해낼 수 있습니다.
블로그로 커스텀을 원하신다면 그에 맞는 서비스 분석이 필요할 것입니다.
블로그도 종류가 많죠. 네이버, 티스토리, 다음, 깃 등.. 다양한 서비스에서 제공되는 이미지 주소를 추출할 방법을 그에 맞게 짜야합니다.
추천드리는 방법은 해당 사이트의 html 코드를 파싱한 뒤에 meta 태그의 오픈그래프 프로퍼티를 찾아보시는 것입니다.
오픈그래프 속성은 한마디로 SNS에 공유될 때 어떤식으로 보여질 것인가에 대한 메타 속성입니다.
이 속성을 이용하시면 될 것 같습니다. 만약 og:image 속성이 없다면 디폴트 이미지를 제공하는 형식, 또는 기획하신 의도에 맞는 처리를 해주시면 될 것 같습니다.
오픈그래프 속성에 대한 자세한 내용은 아래 링크를 참고하시거나 구글에 meta og 로 검색하시면 될 것 같아요.
감사합니다.
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>
`;
}getContent 함수에 data라는 매개변수가 들어옵니다. 여기는 위에 정의해둔 더미데이터가 하나씩 들어오겠죠.
더미데이터는 객체형식으로 되어 있는데,
그 객체에서 imgurl이라는 속성을 꺼내 쓰고 싶은 것이기 때문에,
data.imgurl 로 접근을 해주셔야 합니다!
img 태그의 srs 속성에 바로 imgurl을 넣어주시면 됩니다.
이런식으로요 !