为什么在使用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使用条款：

'我们允许在论坛上进行热链接，但是热链接的图像不能用作网站的内容，包括博客文章，头像，网站元素和广告。 您可以阅读我们的服务条款以获取更多信息