Question

我正在尝试为我的摄影爱好制作一个网站。我想嵌入我的个人资料（如果可能，但我找不到办法。）现在我试图嵌入几张照片。但是，当我使用Instagram图片本身的嵌入代码时，它将无法显示，而且我只看到带有灰色Instagram徽标的灰色/白色背景。

编辑后，网站不会像我的电脑那样显示，展示位置不同。

/*Topbar styling*/

div.navbar {
  position: absolute;
  width: 100%;
  height: 40px;
  background-color: #cc0000;
}

div.navbar p {
  font-family: Trebuchet MS;
  font-size: 20px;
  margin-top: 5px;
  margin-left: 10px;
}

div.menu {
  position: absolute;
  height: 20px;
  width: 20px;
  margin-left: 100px;
  margin-top: 5px;
  color: #fff;
}

div.menu img {
  height: 20px;
  width: 20px;
}

div.content {
  position: absolute;
  margin-top: 30px;
  margin-left: 20px;
}


/* Body styling for browser */


/* HTML position/height/width */

html {
  position: relative;
  height: 100%;
  width: 100%;
}


/* Body height/margin/width/position thing */

body {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  margin: 0px;
}

<!DOCTYPE html>
<html>
<title>Lodewijks Photography</title>

<head>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

<body>

  <div class="navbar">
    <p>Logo komt hier ergens</p>
  </div>

  <div class="menu">
    <button class="menu"><img src="images/hamburger.png"></button>
  </div>

  <div class="content">
    <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BfWMLw2B-P3/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
      <div style="padding:8px;">
        <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:45.83333333333333% 0; text-align:center; width:100%;">
          <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div>
        </div>
        <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/BfWMLw2B-P3/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Ritchie Lodewijks (@rlodewijksphotography)</a>          on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-02-18T17:39:13+00:00">Feb 18, 2018 at 9:39am PST</time></p>
      </div>
    </blockquote>
    <script async defer src="//www.instagram.com/embed.js"></script>
  </div>

</body>

</html>

Answer 1

问题是由脚本的路径引起的。取代

<script async defer src="//www.instagram.com/embed.js"></script>

与

<script async defer src="http://www.instagram.com/embed.js"></script>

Instagram照片嵌入

1 个答案: