本文目的是解决Blogbus中链自巴巴变、Flickr、Picasa、51.com等相册的图片失效的问题，方法是插入一段脚本，将失效的图片url替换为有效的地址。

优点

• 相对简单易行，对Flickr等相册，仅在模板中配置一段Javascript即可实现
• 不修改任何一篇日志正文的内容，也不修改相册中任何图片
• 有效范围为博客的全部日志
• 全部使用免费网络服务也能搞定
• 操作可逆，如果今后相册服务恢复了，则去掉这个脚本，之后一切照常
• 除图片外，也可扩展为处理坏掉的链接

缺点

• 临时解决，并非长久之计
• 对付巴巴变等相册，需要多做一步，找到免费空间去镜像图片（本文会介绍合适的空间，具体见后文）

使用方法

下载 imgSrcReplacer.js，上传到自己的空间，比如Blogbus的文件空间中，记下链接url

进入Blogbus后台 - 模板 - 编辑目前使用的模板


在设置的detail页尾部添加如下内容

<script type="text/javascript" src="https://dl.dropbox.com/u/1703124/imgSrcReplacer.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        imgSrcReplace.replace("bababian","http://probe.limewebs.com/pict_rescue_Bababian/");
        imgSrcReplace.replace("flickr");
        imgSrcReplace.replace("picasa");
    })
</script>

其中有两个脚本，第一个负责定义替换规则，就是刚才下载的脚本，需要将路径替换为您自己的（直接照抄这个也行）。第二个是行内的<script>，负责指定哪些相册需要替换，在上面的例子中，处理了巴巴变、Flickr、Picasa三个相册的图片，如果您只用Picasa，可以将除了 imgSrcReplace.replace("picasa"); 之外的两行都删掉。



如果列表页（比如首页）同样有失效图片需要处理，则在编辑目前使用的模板 - 设置的index页尾部添加如下内容

<script src="http://public.blogbus.com/imgs/jquery.js"></script>
<script type="text/javascript" src="https://dl.dropbox.com/u/1703124/imgSrcReplacer.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    imgSrcReplace.replace("bababian","http://probe.limewebs.com/pict_rescue_Bababian/");
    imgSrcReplace.replace("flickr");
    imgSrcReplace.replace("picasa");
    })
</script>

这个比刚才多出来一段<script src="http://public.blogbus.com/imgs/jquery.js"></script>，因为Blogbus并未在列表页部署jQuery，我们必须自己搞定。



到这时，Picasa，Flickr等相册就解决了，但您会注意到巴巴变比较复杂，处理巴巴变相册的失效图片，需要将其都上传到新的空间，之后在第二个参数指定新的图片路径，比如我将这堆图片都搬到了 http://probe.limewebs.com/pict_rescue_Bababian/ 下面，则这样调用之
imgSrcReplace.replace("bababian","http://probe.limewebs.com/pict_rescue_Bababian/");

目前总共可用的相册有5个

imgSrcReplace.replace("bababian","您新上传的路径");
//巴巴变相册，免费帐户
imgSrcReplace.replace("album51","您新上传的路径");
//51.com相册，免费帐户
imgSrcReplace.replace("flickr");
//Yahoo Flickr相册
imgSrcReplace.replace("picasa");
//Google Picasa相册
imgSrcReplace.replace("dropbox");
//Dropbox同步服务

有关脚本的进一步说明请见下文，介绍了实现功能的原理，因此您可以自己定义和扩展合适的替换规则。

-----------------------↑↑使用方法↑↑ 与 ↓↓折腾过程记录↓↓ 的分割线---------------------------

以我自己的Blog为例，我先后主要使用了巴巴变，Picasa，天涯来吧，Flickr等数个图片外链服务，如果您也在用这些相册，您肯定能明白这是多么大的杯具。简单来说，这些相册目前都挂了，总结原因有两种：

情况1：相册本身没有问题，但被 屏蔽了，导致无法在国内看到
情况2：相册服务商临时或永久的关闭了外链服务，如前一阵子的天涯来吧相册，最近的巴巴变相册和51.com相册（免费用户）

解决坏链图片的思路

在博客中加入一段脚本，作用是页面载入后判断图片元素<img>的src属性，看这个图片url是否来自失效的相册，一经发现就将其替换为可用的新地址。如果是情况1，一般url中稍做手脚就能绕过 的限制，如果是情况2，则需要找个空间镜像这些图片，之后将url都映射到这个新地址。

编写脚本可能会遇到的问题

• 只需要处理日志主体中的图片，不能影响非日志正文（如侧栏、博客主题）中的图片
• 日志列表页面和日志全文页面的总体结构不同，会造成一点麻烦
• 图片有不同尺寸缩放，在映射新url时会遇到问题
• 对付极个别相册（天涯来吧）时可能遇到图片名称重复，要额外想办法解决

替换Flickr图片的示例

有了大体的认识之后，就可以动手写这个脚本了，因为Blogbus为每个博客都嵌入了jQuery，那我们就善加利用，用jQuery来完成这个任务。（实际上是因为有了jQuery后懒得写原始的Javascript……）

举个最简单的例子，比如最近Flickr相册有两个服务器（farm3/farm5）被 了，我们搜到一个解决办法：把 http://farmX.* 改成 http://ac4.farmX.* 即可（参考文章）
意思是说，要把日志正文中，所有来自这种url的图片
http://farm3.static.flickr.com/2648/4142697322_24fb235362_t.jpg
都替换成
http://ac4.farm3.static.flickr.com/2648/4142697322_24fb235362_t.jpg
这个样子

用jQuery的话，写起来很简单

$(document).ready(function(){
    var $img = $("div.postBody img");
    $img.filter("[src*=static.flickr.com]").each(function(){
        this.src = this.src.replace(/http:\/\/farm/g,"http://ac4.farm");
    })
})

基本道理就是这样，$("div.postBody img")取得日志内容中的<img>标签，以保护侧栏中的图片不被影响。jQuery选择器是按照Blogbus约定的模板写法，如果您用了特殊的模板，有可能要动手改一下选择器。

为了以后修改方便，最好把它存为单独一个*.js文件（本文中就是指imgSrcReplacer.js），同时把替换功能设成一个自定义对象的方法，方便以后统一调用。最后，这个脚本要放到页面中的正确位置。随便从找篇日志查看源代码，可以看到Blogbus官方配置的jQuery是在评论<div>之后加载的（够靠后的，大概是为不影响速度……），那么我们的脚本要放在这之后才不会出现定义错误。


好在可供用户编辑的Blogbus模板中，确实存在一些更靠后的位置。


如图，脚本放在模板detail页的最尾端即可。

到这一步，日志内页的Flickr图片算是解决了，但是列表页的图片仍旧看不到，需要将模板index页同样处理一下才行，注意Blogbus官方没有给index页配置jQuery，我们要自己添加进去。具体在"使用方法"一节已经说明，不再赘述。

针对具体的相册处理失效外链

解决Flickr相册的失效外链

刚才在示例中提到了，在url开头添加ac4.（参考文章）
另外也可以在图片url内直接用ip替换服务器地址解决，可以看一下 可能吧 最近的文章（图片也是链自Flickr）

解决Dropbox的失效外链

更简单，将 http:// 改为 https:// 即可（参考文章），如
http://dl.dropbox.com/u/1703124/SyntaxHighlighterLoader.js
https://dl.dropbox.com/u/1703124/SyntaxHighlighterLoader.js

解决Picasa相册的失效外链

用GAE加密代理，在url前添加https://proxysama.appspot.com/（参考文章），如
http://lh6.ggpht.com/_s3oBRqulyA4/Sq7v3bZOcZI/AAAAAAAAARw/UDm9agelIfQ/s640/Desert.jpg
https://proxysama.appspot.com/lh6.ggpht.com/_s3oBRqulyA4/Sq7v3bZOcZI/AAAAAAAAARw/UDm9agelIfQ/s640/Desert.jpg
此外，我照着Flickr的样子，试了ip替换服务器地址的办法，结果均无效，有哪位朋友知道原因的烦请告诉一下。

解决Bababian相册的失效外链

好，麻烦的家伙来了。巴巴变的外链失效是服务本身出了问题，所以不可能用上面的简单方法。需要先把巴巴变相册的图片弄到自己手里，可以参考这篇日志《如何批量搞走巴巴变相册的所有图片》，下载后都放在一个文件夹即可。您会发现文件名是一串随机字符，不要去管它，我们要的就是这种效果～实际上无序字符是图片上传后被hash处理的结果，使每张图片几乎对应唯一的ID，我们利用这一点将多个专辑的海量图片放在一个文件夹而不会重名。

之后把这些图片上传到一个新的空间，并放到同一个路径下，然后就可以把url映射到新地址了。
http://photo1.bababian.com/upload13/20080914/3E35BC2F2B39BC63FA37B172A3643D4E.jpg
http://图片转移到新路径/3E35BC2F2B39BC63FA37B172A3643D4E.jpg

有关这个新的空间，需满足如下条件

• 支持直接外链（很多网盘服务不提供直链地址，不予考虑）
• 不更改上传文件的名称（否则无法对应新旧两个图片地址，一般的网络相册上传后都不能保持原文件名称）
• 支持批量上传（具体如何实现的无所谓，只要能方便的搞上去一堆文件就行）
• 相对稳定（至少比您想要逃离的相册稳定……）

其余诸如速度，容量，流量限制……等等因素均可放到次要考虑，不用太在意。因为我们只是临时解决，无需事事周全。

按照上述条件筛选，显然有个商业付费空间是最理想的，不过既然您都用上这么专业的服务了，干脆买个域名开独立博客算了，也省得在Blogbus折腾。因此比较可行的方案包括：

• 找个开独立博客的朋友蹭点地盘用……
• 注册一个免费空间（静态空间就可以）
• 注册一个功能相似的网络服务（如Dropbox之类）

至于我自己嘛，是三种办法都用上了……给大家推荐些相关资源吧：

limedomains（介绍）
提供200M容量，100M月流量，其实对我这样小打小闹的用户也够用了……注册一个免费的二级域名，然后登录FTP上传图片即可。类似的，提供二级域名、免费空间的服务商有许多，找个满足前提条件的即可。

Dropbox
这个不多介绍了，网上相关文章一搜一大把。提醒一下Dropbox流量过多时会暂时冻结账户的，再就是要把链接协议都换成https（本来Dropbox可以扮演救星的，结果现在成了被救助的角色……）

折腾到新空间看着挺复杂，其实也就半小时的功夫，之后即可挽救全博客的图。整个过程中，以下几点需要注意：

• 要下载巴巴变相册图片原图
• 原url仅保留最后一段（3E35BC2F2B39BC63FA37B172A3643D4E.jpg）其余都替换为新路径
• 巴巴变相册有多个图片外链尺寸，而我们新上传的只有原图，可以用载入原图后调整宽度的方式处理，这样每张240px或500px的图片也要载入原图后用Javascript缩小，费了些流量，但这是最省事的办法

后两条是编写代码才用得着考虑的，您如果只是使用脚本就不用管，这段代码大约是这样：

var newurl = "http://probe.limewebs.com/pict_rescue_Bababian/";
$img.filter("[src*=bababian.com]").each(function(){
    var size = this.src.replace(/http:\/\/photo\d.bababian.com\/.+?\/[^/]+?(_(75|100|240|500|800))?\.(jpg|png|gif)$/g,"$2");
    size = parseInt(size) || "";
    if (size) {
        $(this).data("size",size).load(function(){
            $(this).width($(this).data("size"));
        })
    }
    this.src = this.src.replace(/http:\/\/photo\d.bababian.com\/.+?\/([^/]+?)(_(75|100|240|500|800))?\.(jpg|png|gif)$/g,newurl+"$1.$4");
})

解决51.com相册的失效外链

跟巴巴变差不多，下载并保持无序字母的名称，上传到新空间即可。51相册不提供多种图幅，所以更省事了。



至此就折腾的差不多了。最后请注意！无论您将图片转移到哪里，都务必要在自己手中留着备份，因为免费使用人家的服务（尤其没有名气的）就意味着自行承担风险，等到哪天发现上传的文件全没了，也不要觉得奇怪。我相信在看本文的各位肯定都有过经验教训了哈～

测试比较仓促，可能会有些不完善的地方，如果有问题请留言讨论，我们一起解决。