ajax调用后图像加载失败

Image load fail after ajax call

本文关键字：加载 失败 图像 调用 ajax      更新时间：2023-09-26

我是新来的，我有一个问题，我没有找到答案…

我得到了一个web应用程序运行在Zend与MVC。在客户端，我使用Jquery执行一个Ajax调用，以Json格式返回一些数据。使用javascript方法，我能够创建与结果相对应的HTML代码。在此之前，一切正常:-)

我的问题是，当我试图生成一个html组件，如图像，其中需要一个URL。

下面是我的代码: 
<script type="text/javascript">
    $.getJSON("/index/items", function(data) {
        var items = [];
        $.each(data, function(key, val) {
            items.push('<li id="resultList-' + val.id + '" class="resultList"><img src="images/item.jpg" alt="img">' + val.name + '</li>');
        });
        $('<ul/>', {
            'id': 'resultList',
            'class': 'myClass',
            html: items.join('')
        }).appendTo('#divResult');
    });
</script>
<div id="content">
    <div id="divResult"></div>
</div>

我输入图像src="images/item.jpg

我的问题是没有找到图像，我只得到'alt'标签->错误404。

当我打开firebug时，我可以看到URL上的GET查询:

http://myWebsite/控制器/图片/item.jpg

可以肯定的是，服务器在这里找不到它，因为我把图像放在了:/project/public/images文件夹…

根据你:

  1. 您认为执行是否良好(安全)?
    2. 解决我的问题的最好方法是什么?

请理解，这一切对我来说都是新的，我正在努力学习。

处理此问题的最佳方法是将其放在相对路径中。

目录结构为

的示例:
project/
   html/
     htmlfile.html //references the image file
   js/
     jsfile.js //references the image file
   images/
     item.png

那么你需要使用

<img src="../images/item.jpg" alt="img" />

指定访问该图像的文件的相对路径

相关文章：