javascript - HTML image link not showing up in Safari or Chrome -
i have image supposed appear on website page. works in firefox, not appear in either safari or chrome reason. line have used image in 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 figure out why appears in 1 browser not others , have not yet found answer problem.
edit: code 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>
you appending img
img
. i'm surprised worked @ all.
either change 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 attributes on existing tag.
$(document).ready(function(){ $("#picture").attr("src", "https://www.fillmurray.com/300/250"); $("#picture").attr("alt", "bill awesome"); //style should come stylesheet, i'll leave $("#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>
Comments
Post a Comment