html - 为什么图像不会加载到使用 html 和 css 的网站的移动版本上？

Question

我笔上的图像http://codepen.io/niffyy/pen/GNzpNW?editors=1100不会加载到移动屏幕上。

 <div class="row">
<div class="container" id="third">
       <p class="para2"> Portfolio </p>
     <div class="col-xs-6 col-md-6">
      <div><a href='http://codepen.io/niffyy/full/VPZLpj/' class="thumbnail"><img src="http://i.imgur.com/YiCHp7M.jpg" alt="screenshot"></a><h5>Simple Nelson Mandela Tribute Page</h5> 
      </div>

       <div><a href='#' class="thumbnail"><img src="http://i.imgur.com/mMJs4kq.png" alt="screenshot3"></a><h5> Coming soon!</h5>
</div> 

   </div>

      <div class="col-xs-6 col-md-6">
        <div><a href='http://codepen.io/niffyy/full/GNzpNW/' class="thumbnail"><img src="http://i.imgur.com/z5PtrqQ.jpg" alt="screenshot1"></a><h5> Portfolio Page</h5>
  </div> 

      <div><a href='#' class="thumbnail"><img src="http://i.imgur.com/mMJs4kq.png" alt="screenshot2"></a><h5> Coming soon!</h5>
</div>



   </div>
   </div>
   </div>



 <div class="col-xs-6"> <img class="img-responsive" id="me" alt="a picture of me" src="http://i.imgur.com/EWx1Z9x.jpg">
      </div>

<--CSS-->

#me{
    width:100%; 
    height: auto;

  margin-top:45px;
  margin-bottom:30px;
  border-style: solid;
  border-width:5px;
  border-radius:20px;
  border-color:#FF33CC;
}

我尝试将格式从 png 更改为 jpeg 并在上传之前调整图像大小，但它仍然不起作用这也适用于网站上的缩略图，我不确定为什么。我检查了代码是否有错误，但没有看到我哪里出错了。它在桌面上显示良好。

Answer 1

我使用 imgur.com 托管我的图像，然后热链接到我的页面。这不符合他们的使用条款，这就是图像未加载到我的页面上的原因。将来如果有人遇到与我相同的问题，请检查您尝试用于页面的图像是否允许热链接。我将托管站点切换到另一个站点，现在我的图片可以正常工作了。

来自 Imgur 使用条款:

'We allow hotlinking on forums, but hotlinked images cannot be used as content for a website, including blog posts, avatars, site elements, and advertising. You can read our terms of service for more info