Friday, May 15, 2009

Blogger cannot display the image

Please wait, loaing rat_cheese.gif...
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s1600/rat_cheese.gif"
     border="0" alt="Using s1600"
     id="BLOGGER_PHOTO_ID_5336176003028964418" />

No comments:

Post a Comment