Question

我在尝试使用博客缩略图时遇到困难。我不想使用博客默认缩略图，因为它的大小只有72px，它非常小。所以，我通过重写图像源的URL（由google blogger服务托管的图像）找到了一种方法。例如，我在此网址http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg中有一个图片，图片将加载最大宽度为1600像素，由网址中的/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>

问题是，我如何使用javascript方法重写默认图片网址？我想通过将http://重写为https://来强制在HTTPS中投放的图片，并通过将s1600重写为s300以300px的宽度投放。最终的网址如下所示：https://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg

Answer 1

代码位于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');
};

您可以将代码放在<script> - </body>之前的代码中，而不是window.onload包装。

Answer 2

简单替换令牌。

function getThumbnailUrl (element)
{
    $url = element.href.split("/");
    $url[7] = "s300"; 
    return $url.join("/");
}

用javascript重写图像源URL

2 个答案: