HTML image link not showing up in Safari or Chrome

Question

I have an image that is supposed to appear on a website page. It works in Firefox, but does not appear in either Safari or Chrome for some reason. This is the line I have used for the image in the JS file:

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

I can't seem to figure out why it appears in one browser but not the others and have not yet found an answer to this problem.

Edit: this is the code from the HTML file:

<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

You are appending an img to an img. I'm surprised that worked at all.

Either change the parent tag:

<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>

Or set the attributes on the existing tag.

$(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>