Load image to div tag by using jquery and ajax
Question
I have a problem to find a solution, can you help me how to add image to div tag by using jquery and ajax? I tried various solutions but I could not done.
I need to pull the image from steel_agg_bof_flash_en.html that can be opened as a xml file, and this is data interfaces information that I needed for this task.
I'm working on localhost and this file (steel_agg_bof_flash_en.html) is in my root folder
<data> <labels> <closebtn><![CDATA[]]></closebtn> <path></path> <addbtn><![CDATA[add hotspots]]></addbtn> <deletebtn><![CDATA[delete hotspots]]></deletebtn> <resetbtn><![CDATA[reset hotspots]]></resetbtn> </labels> <basics> <lg></lg> <clickmapid>contentbean:9492</clickmapid> <adminMode>0</adminMode> <imgpath>/linkableblob/internet_en/9492/image/steel_agg_bof_flash_en-image.jpg</imgpath> <format>landscape</format> <title><![CDATA[]]></title> </basics> <hotspots> <hotspot> <hsid>clickMap_item_9510</hsid> <title><![CDATA[Optimal design ]]></title> <position><![CDATA[350,469,247]]></position> </hotspot> .... </hotspots> </data>
This is my current code and what I tried to do, but doesnt work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <div id="" class="content_item"> <h1>BOF vessel </h1> <!-- class should be either "portrait" or no class for "landscape" --> <div id="clickMap"> <div id="clickMapFlashContainer"></div> <div id="clickMapFlash" style="width:auto"></div> </div> <div id="clickMap_item_default" class="clickMapItem text"> <div><p>Due to long-standing contact with customers RHI has detailed knowledge of the requirements that steelworkers place on refractories. This is why RHI has been involved in the development of package and system solutions for many years und nowadays offers customized high-end solutions for basically all individual customer requirements.</p></div> </div> </div> <script type="text/javascript"> $( document ).ready(function() { $.ajax({ type: "GET", url: "steel_agg_bof_flash_en.html", dataType: "xml", success: function xmlParser(xml) { $(xml).find('basics').each(function () { var img = $(this).find('imgpath').text(); $('<img />') .attr('src', "" + img + "") // ADD IMAGE PROPERTIES. .width('200px').height('200px') .appendTo($('#clickMapFlash')); // ADD THE IMAGE TO DIV. }); } }); }); </script> </body>
1 answers
solution1
0 2016-10-27 14:34:35
Try to change the relative URL to absolute in imgpath node:
<imgpath>http://www.fopv.org.uk/images/works.jpg</imgpath>
Just to be sure you are not trying to load non-existing image on your file system.
It seems that your code works:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.