3 cách khắc phục lỗi không hiển thị ảnh trên blogspot

[tintuc]

Ảnh trên blogspot không hiển thị - điều này gây bất tiện cho người đọc/khách hàng khi truy cập vào blogger của bạn , ảnh hưởng khá lớn đến việc bán hàng trên mạng của bạn . Gặp lỗi này, các bạn thắc mắc không biết nguyên nhân từ đâu và cách khôi phục thế nào? Hôm nay, tớ xin giải đáp và share 1 số cách sửa lỗi không hiển thị ảnh trên blogger  để các bạn tìm hiểu thêm và áp dụng.

Nguyên nhân

• Xóa ảnh trên picasa trang web .google.com hay Google+. Ảnh upload lên blogger  hay Google+ nó đều lưu trữ ở picasa site web .google.com, do đó xóa ảnh trên picasa website .google.com hay Google+ thì ảnh trên template blog sẽ bị lỗi. Cách khắc phục duy nhất upload lại hầu hết các ảnh đã bị xóa và thay link từng ảnh một .
• Lỗi do nhà mạng chặn. Bất cứ đối tượng nào trong đường dẫn có chứa đuôi  blogger .com như tên miền, hình ảnh ... sẽ đều bị chặn.

Cách khắc phục

Có 3 cách, tùy vào từng trường hợp cụ thể, các bạn có thể chọn Một trong 3 cách để áp dụng nhằm giải quyết vấn đề 1 cách nhanh nhất.

Cách 1: Chỉnh sửa thủ công

Khi tải ảnh lên bài viết , link ảnh sẽ có dạng*.bp. blogger .com, các bạn chỉ cần chuyển bài đọc qua tab HTML rồi sửa link đó thành lh4.googleusercontent.com hoặc lh4.ggpht.com là được. Trong đó “*” là giá trị ứng từ 0 đến 9. Cách này sử dụng khi bài viết của các bạn có ít hình ảnh thôi nhé vì nó mất khá nhiều thời gian và công sức.

Cách 2: Sử dụng Javascript

Với cách này, link ảnh sẽ tự động chuyển về dạnglh4.googleusercontent.com  các bạn sẽ không cần chỉnh sửa thủ công từng ảnh 1 .

Vào  theme blog  => Mẫu =>Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ . Sau đó dán đoạn mã Code sau ở phía trên thẻ  và lưu mẫu.

<script type='text/javascript'>

//<![CDATA[

var images = document.getElementsByTagName("img");

for(var i=0;i<images.length;i++) { images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com"); } //]]>

</script>

Cách 3: Sử dụng Jquery

         Cũng tương tự như cách 2, đây là 1 cách tự động khác. các bạn copy đoạn code sau đây và dán vào trước thẻ  trong Template.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>

//<![CDATA[ $("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(//[0-9]+(.bp.blogspot)?/, "/lh4.googleusercontent")) }); //]]>

</script>

Lưu ý: Nếu như trong theme của các bạn đã khai báo thư viện Jquery rồi thì có thể bỏ đoạn sau đi nhé!

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

Chúc các bạn thành công!

[/tintuc]