javascript - HTML 图像链接未显示在 Safari 或 Chrome 中

Question

我有一张图片应该出现在网站页面上。它在 Firefox 中有效，但由于某种原因在 Safari 或 Chrome 中都没有出现。这是我在 JS 文件中用于图像的行:

$("#picture").append("<img src='/images/sub1/Green_graph.png' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")

我似乎无法弄清楚为什么它出现在一个浏览器中而不出现在其他浏览器中，而且还没有找到这个问题的答案。

编辑:这是 HTML 文件中的代码:

<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-6">
          <div class="row">
            <div class="col-12">
              <div id="info">
                <h3 id="rank"><span style = "color:orange"> random:</span></h3>

                  <div class="col-6">
                    <img id="picture">

                  </div>
                  <div class="col-6">
                    <h4 id="blockquoteField"></h4>
                  </div>
                <div id="density"></div>
              </div>
            </div>
          </div>
        </div>
        <div class = "col-md-4">
             <img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px"> 
        </div>
        <div class="col-md-1">
        </div>
</div>

Answer 1

您正在将 img 附加到 img。我很惊讶这完全有效。

要么改变父标签:

<span id="picture"></span>

$(document).ready(function(){
$("#picture").append("<img src='https://www.fillmurray.com/300/250' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-6">
          <div class="row">
            <div class="col-12">
              <div id="info">
                <h3 id="rank"><span style = "color:orange"> random:</span></h3>

                  <div class="col-6">
                    <span id="picture"></span>

                  </div>
                  <div class="col-6">
                    <h4 id="blockquoteField"></h4>
                  </div>
                <div id="density"></div>
              </div>
            </div>
          </div>
        </div>
        <div class = "col-md-4">
             <img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px"> 
        </div>
        <div class="col-md-1">
        </div>
</div>

或在现有标签上设置属性。

$(document).ready(function(){
  $("#picture").attr("src", "https://www.fillmurray.com/300/250");
  $("#picture").attr("alt", "Bill is awesome");
  //Style should really come from a stylesheet, but I'll leave it for now
  $("#picture").attr("style", "width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-6">
          <div class="row">
            <div class="col-12">
              <div id="info">
                <h3 id="rank"><span style = "color:orange"> random:</span></h3>

                  <div class="col-6">
                    <img id="picture">

                  </div>
                  <div class="col-6">
                    <h4 id="blockquoteField"></h4>
                  </div>
                <div id="density"></div>
              </div>
            </div>
          </div>
        </div>
        <div class = "col-md-4">
             <img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px"> 
        </div>
        <div class="col-md-1">
        </div>
</div>