javascript - ajax调用后图像加载失败

Question

我是新来的，我有一个问题，我找不到答案...

我有一个使用 MVC 在 Zend 上运行的 Web 应用程序。在客户端，我使用 Jquery 执行 Ajax 调用，以 Json 格式返回一些数据。使用 javascript 方法，我可以创建与结果对应的 HTML 代码。直到这里一切都很好:-)

我的问题是当我尝试生成需要 URL 的 html 组件（例如 Image）时。

这是我的代码：

<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/controller/images/item.jpg

当然，服务器在这里找不到它，因为我将图像放在： /project/public/images文件夹中......

照你说的：

1. 您认为实施是否良好（安全）？
2. 解决我的问题的最佳方法是什么？

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

Answer 1

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

例如，如果目录结构是：

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

这指定了相对于正在访问图像的文件的图像文件的路径。