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>

HTML图片链接未显示在Safari或Chrome中

1 个答案: