유튜브 섬네일 따지 않고 사이트의 이미지 주소를 가져오는 것은 어떻게 해야 하나요?
맛집주소에 유튜브 섬네일이 아닌 블로그 이미지주소를 불러오고 싶은데요,
올려주신 코딩은 유튜브섬네일 따는 자바스크립트가 있어서 헷갈려요 ㅜㅜ
혹시 이미지 주소를 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 로 검색하시면 될 것 같아요.
감사합니다.
0
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
getContent 함수에 data라는 매개변수가 들어옵니다. 여기는 위에 정의해둔 더미데이터가 하나씩 들어오겠죠.
더미데이터는 객체형식으로 되어 있는데,
그 객체에서 imgurl이라는 속성을 꺼내 쓰고 싶은 것이기 때문에,
data.imgurl 로 접근을 해주셔야 합니다!
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