Question

图片未显示在我的本地主机上。这是HTML代码。我尝试了几种变体来显示图像。使用Twitter Bootstrap。任何帮助将不胜感激。

  <div class="media">
  <a class="pull-left" href="">
  <img class="media-object" src="/img/grads.jpg/64x64">
  </a>
  <div class="media-body">
  <h4 class="media-heading">Collaborate with students at other Universities</h4>
  <p>Join your classes and work with other students on studying without having to meet up.</p>
  </div>
  </div>

  <div class="media">
  <a class="pull-left" href="">
  <img class="media-object" src="grads.jpeg/64x64">
  </a>
  <div class="media-body">
  <h4 class="media-heading">Meet new friends you're in class with</h4>
  <p>Pick who you want to be a stranger in your own classes. School is social and so is moreo. : )</p>
  </div>
  </div>

这是CSS代码。不知道我做错了什么。

<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 10px;
    padding-bottom: 20px;
  }

  /* Custom container */
  .container-narrow {
    margin: 0 auto;
    max-width: 700px;
  }
  .container-narrow > hr {
    margin: 30px 0;
  }

  /* Main marketing message and sign up button */
  .jumbotron {
    margin: 30px 0;
    text-align: center;
  }
  .jumbotron h1 {
    font-size: 72px;
    line-height: 1;
  }
  .jumbotron .btn {
    font-size: 15px;
    padding: 10px 20px;
  }

  /* Supporting marketing content */
  .marketing {
    margin: 5px 0;
  }
  .marketing p + h4 {
    margin-top: 14px;
  }
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Answer 1

尝试查看来源并检查图像的路径。由于您已使用相对路径，请检查是否在本地

上采用了正确的图像路径

Answer 2

验证您的图片路径。它应该以文件名和适当的扩展名结束。

见到你了，

<img class="media-object" src="grads.jpeg/64x64">

这可能是这样的，我想;

<img class="media-object" src="/64x64/grads.jpeg">

现在，如果图像（grads.jpeg）在root的64x64文件夹中可用，那肯定会呈现。

Answer 3

使用Bootstrap image进行图片加载和媒体对象使用data-src属性不是src，但我没有看到任何使用直接图片网址加载图片的示例Bootstrap Media object

修改

我认为这个标签是指在线网址，我不确定。看一下这个placehold这个URL就是实用程序站点，它就像引导程序示例那样重新调整托管图像的大小

图像未出现在本地主机上

3 个答案: