关于如何显示Jianshu图片的方案

问题的提出

简书是一个很好的博客网站，很多朋友都在jianshu上进行创作。当然出于各种目的，我们可能想将简书的文章同步到其他网站。

这个时候你会发现所有的文章里面的图片都无法正常显示了。

原因

如果你观察过简书投稿的过程，你会发现，简书投稿的时候，所有的图片，简书都会重新保存一遍。也就是说，即使你的图片使用的是一个链接，简书系统也会将这个图片抓取然后保存到自己的服务器。

简书的图片地址大概是这个样子的：

//upload-images.jianshu.io/upload_images/2005483-a02a512bf1520d08.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240

然后如果你在自己的网站上使用这样的图片路径，则会返回403

//upload-images.jianshu.io/upload_images/1628444-05ac5dac52e7ca93.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 Failed to load resource: the server responded with a status of 403 (Forbidden)

原因是应为，浏览器在获取图片资源的时候，会将添加一个 Referer 在HTTP Head。服务器会检查这个参数是不是简书的域。

如果不是的话，就403禁止了。所以你的网站用了这个地址，就无法正确显示这个图片了。

解决方案

如果你将这个图片地址在浏览器中直接打开，你会发现图片是可以显示的。

这个时候Head是没有Referer信息的。也就是说服务器没有禁止掉空Referer的访问。

一般来说，修改Referer是很困难的事情，特别是使用前端的方法。所以这里使用的是偏后端的方法。

如果前端程序发现了jianshu的图片，则将图片的URL进行变化。例如这里将简书的URL修改成 “/FileSystem/Jianshu?filename=xxxx”的形式。
在后台的代码中，使用WebClient下载图片。

                        if (this.src.indexOf(jianshuUrl) == -1){

                            //非简书

                            filepath = this.src;

                        }else{

                            //简书

                            if (this.src.indexOf("?") != -1){

                                filepath = this.src.substring(0,this.src.indexOf("?"));

                            }else{

                                filepath = this.src;

                            }

                            filepath = filepath.substring(jianshuUrl.length);

                            filepath = "/FileSystem/Jianshu?filename=" + filepath;

                            this.src = filepath;

                        }

        /// <summary>

        /// Jianshu

        /// </summary>

        /// <param name="filename"></param>

        /// <returns></returns>

        public ActionResult Jianshu(string filename) {

            string filepath = JianshuFolder + filename;

            if (!System.IO.File.Exists(filepath))

            {

                try

                {

                    //下载简书文件

                    WebClient client = new WebClient();

                    client.DownloadFile("//upload-images.jianshu.io/upload_images/" + filename, filepath);

                }

                catch (System.Exception ex)

                {

                    InfraStructure.Log.ExceptionLog.Log("SYSTEM", "Jianshu", "FileSystem", ex.ToString());

                    return null;

                }

            }

            return File(filepath, "image/jpeg");

        }

也就是说，简书的图片，不是由浏览器去取得的，而是后台程序去下载的。图片的url地址已经发生变化了。

潜在问题

1.简书可能会禁止无Referer的资源下载请求

2.如果该图片没有被写作者访问过，可能在使用本网站编辑器的时候，图片预览的地方也无法正常显示。

3.对于网站服务器要求比较高。

文本已经同步到http://www.codesnippet.info/Article/Index?ArticleId=00000036