블로거 미리보기 이미지를 실험 할 때 멈췄습니다. 크기가 72px에 불과하므로 블로거 기본 미리보기 이미지를 사용하고 싶지 않습니다. 매우 작습니다. 그래서 이미지 소스 (Google 블로거 서비스에서 호스팅하는 이미지)의 URL을 다시 작성하는 방법을 찾았습니다. 예를 http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg들어이 URL 에 이미지가 있습니다. 이미지는 URL 에로 표시된 최대 너비 1600px로로드됩니다 /s1600/. 이미지를 300px 너비로로드하고 싶은 경우 URL은 http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg. 또한 이미지는 기본적으로 HTTP 프로토콜로 제공되지만 https://프로토콜 로 추가하는 것만으로 HTTPS로 제공 할 수 있습니다.
이것은 내 썸네일 마크 업입니다.
<div class="thumbnail">
<a class="thumbTooltip" href="#" title="Flat Design Sample">
<img alt="Flat Design Sample" src="http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg">
</a>
</div>
문제는 자바 스크립트 방법을 사용하여 기본 이미지 URL을 어떻게 다시 작성할 수 있습니까? 나는 다시 작성하여 HTTPS에서 제공 이미지를 강제 할 http://로 https://, 그리고 다시 작성하여 300 픽셀 폭 봉사 s1600에 s300. 최종 URL은 다음과 같습니다.https://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg
코드는 안에 window.onload모든 요소가 있는지 확인합니다. 그런 다음 url-string에서 첫 번째 replace()프로토콜이 변경됩니다. 두 번째는 정규식을 사용하여 크기가 정의 된 세그먼트를 찾고 s300. 이미지가 다른 디렉토리에서 온 경우에도 작동합니다.
window.onload = function() {
var img = document.querySelector('.thumbnail img');
img.src = img.src.replace('http', 'https').replace(/\/s\d+(?=\/)/, '/s300');
};
window.onload 랩 대신에 코드를 <script>-tags 바로 앞에 넣을 수도 있습니다 </body>.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다