使用jquery和ajax將圖像加載到div標簽

Question

我在尋找解決方案時遇到問題，您能幫我如何使用jquery和ajax將圖像添加到div標簽嗎？ 我嘗試了各種解決方案，但無法完成。

我需要從steel_agg_bof_flash_en.html中提取圖像，該圖像可以作為xml文件打開，這是我完成此任務所需的數據接口信息。

我正在使用localhost，並且此文件（steel_agg_bof_flash_en.html）在我的根文件夾中

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

這是我當前的代碼以及我嘗試執行的操作，但是不起作用

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

Answer 1

嘗試在imgpath節點中將相對URL更改為絕對URL：

<imgpath>http://www.fopv.org.uk/images/works.jpg</imgpath>

只是要確保您不嘗試在文件系統上加載不存在的映像。

看來您的代碼有效：

https://jsfiddle.net/ae031p5q/

使用jquery和ajax將圖像加載到div標簽

問題描述

1 個解決方案

解決方案1
0 2016-10-27 14:34:35

使用jquery和ajax將圖像加載到div標簽

問題描述

1 個解決方案

解決方案1 0 2016-10-27 14:34:35

解決方案1
0 2016-10-27 14:34:35