Blogger cannot display the image

Using the images stored with blogger could be tricky. There is no doubt that the image can be displayed correctly if you use exactly the code provided by blogger.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
     href="http://2.bp.blogspot.com/_3kbZZ4C77GE/Sg3nzW-BVEI/AAAAAAAAABg/4JHSzp4OKV4/s1600-h/rat_cheese.gif">
     <img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 230px; height: 320px;"
       src="http://2.bp.blogspot.com/_3kbZZ4C77GE/Sg3nzW-BVEI/AAAAAAAAABg/4JHSzp4OKV4/s320/rat_cheese.gif"
       border="0" alt=""
       id="BLOGGER_PHOTO_ID_5336176003028964418" />

As you may notice in the above code, the references specified in href and src are no much difference except for one directory hierarchy:

• href uses the image in s1600-h:     the image looks original or bigger.
• src uses the image in s320:     the image is shrunk or smaller.

With the image specified in s320 directory, the image is displayed without a problem:

<img style="display:block; margin:0px auto 10px; text-align:center;"
     src="http://2.bp.blogspot.com/_3kbZZ4C77GE/Sg3nzW-BVEI/AAAAAAAAABg/4JHSzp4OKV4/s320/rat_cheese.gif"
     border="0" alt="Using s320"
     id="BLOGGER_PHOTO_ID_5336176003028964418" />

With the image specified in s1600-h directory, the image cannot be displayed:

<img style="display:block; margin:0px auto 10px; text-align:center;"
     src="http://2.bp.blogspot.com/_3kbZZ4C77GE/Sg3nzW-BVEI/AAAAAAAAABg/4JHSzp4OKV4/s1600-h/rat_cheese.gif"
     border="0" alt="Using s1600-h"
     id="BLOGGER_PHOTO_ID_5336176003028964418" />

In order to reference the bigger image, you have to use the undocumented directory s1600 for image reference, not s1600-h:

<img style="display:block; margin:0px auto 10px; text-align:center;"
     src="http://2.bp.blogspot.com/_3kbZZ4C77GE/Sg3nzW-BVEI/AAAAAAAAABg/4JHSzp4OKV4/s1600/rat_cheese.gif"
     border="0" alt="Using s1600"
     id="BLOGGER_PHOTO_ID_5336176003028964418" />