我有一个问题要找到解决方案，你能帮我如何使用 jquery 和 ajax 将图像添加到 div 标签吗？我尝试了各种解决方案，但我做不到。
我需要从 steel_agg_bof_flash_en.html 中提取可以作为 xml 文件打开的图像，这是我完成此任务所需的数据接口(interface)信息。
我在本地主机上工作，这个文件 (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>最佳答案
尝试将imgpath节点中的相对URL改为绝对:
<imgpath>http://www.fopv.org.uk/images/works.jpg</imgpath>
只是为了确保您没有尝试在文件系统上加载不存在的图像。
看来您的代码有效:
关于javascript - 使用 jquery 和 ajax 将图像加载到 div 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40286700/