超文本标记语言页面的jQuery load()中未加载图像
超文本标记语言页面的jQuery load()中未加载图像
提问于 2012-08-23 13:57:07
我使用下面的代码在div中加载一个html页面，
$("#htmlViewer").load("conversion_test/to_convert_3264/"+getPageName(pageCount)+".htm", function(response, status, xhr) {
if (status == "error") {
/* var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText); */
jAlert('Unexpected Error : Please try again later', 'Alert');
pageCount--;
}
});在上面的代码中，我只得到了HTML文本，但没有得到该页面中的CSS和图像。为了获得CSS，我添加了另一个Ajax请求。否则，ajax调用中加载的页面将不会应用css样式。
$.ajax({
url:"conversion_test/to_convert_3264/style.css",
success:function(data){
$("<style></style>").appendTo("head").html(data);
}
})我不确定这是不是正确的方法。问题是我在ajax调用过程中没有得到图像。图片来自conversion_test/to_convert_3264/images文件夹。任何帮助都是非常感谢的。如果我需要提供更多细节，请让我知道。
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-23 15:36:36
我会把它写成一个答案，所以它比评论线程更明显：
问题是调用页与被调用页不在同一文件夹中。目标页面引用具有相对路径的图像，因此，当目标页面插入到调用页面中时，这些引用不再匹配。换句话说，页面的上下文已经改变了。
有两种可能的解决方案：
- 使用图像的绝对路径，因此上下文无关紧要。
- 使用jQuery来修复接收到的html中的路径(
- 自己用Dilip自己提出了这方面的代码
Stack Overflow用户
发布于 2012-08-23 15:30:37
我最终基于@MiikaL的建议进行了修复。下面是我用来解决这个问题的代码。
function replaceImageSource() {
$("img").each( function(){
$(this).attr({
src: 'conversion_test/to_convert_3264/' + $(this).attr('src')
});
});
}希望这对某些人有帮助。谢谢你的帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12085559
复制相关文章
相似问题
腾讯云开发者
