使用jquery和ajax将映像加载到div标记
使用jquery和ajax将映像加载到div标记
提问于 2016-10-27 14:03:24
我有一个问题要找一个解决方案，你能帮我如何使用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>
回答 1
Stack Overflow用户
发布于 2016-10-27 14:34:35
尝试在imgpath节点中将相对URL更改为绝对：
<imgpath>http://www.fopv.org.uk/images/works.jpg</imgpath>确保您没有试图在您的文件系统上加载不存在的图像。
您的代码似乎有效：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40286700
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号