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>