设置 innerHTML - 图像未显示，但 alt 是答案

【问题标题】：setting innerHTML - image not showing up but alt is设置 innerHTML - 图像未显示，但 alt 是
【发布时间】：2023-03-26 18:49:01
【问题描述】：

我有一个页面，我从 ajax 请求中提取一些 html，然后将其插入 div。 html 正确地进入了 div，只是图像没有显示出来，但它的 alt 文本显示了。这是html：

<div class='fltright'><img src='images/esl.jpg' alt="English as a Second Language"/></div><p><span class='large'>Lorem ipsum dolor sit amet,</span> consectetur adipiscing elit. Cras tempor semper tortor. </p>

是否有任何原因导致图片不显示而替代文本显示？

AJAX 代码：

function getData(fileName){
    fileLoc = encodeURI("assets/"+fileName+".html")
    //alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    //alert(request.readyState);
    //alert(response);
    //alert(request.status);
}
function processData(){
    if (request.readyState==4){
        if (request.status==200){
            try{
                response = request.responseText;
                document.getElementsByClassName('content')[0].innerHTML = response;
            } catch(e){
                alert("Error: " +e.description);
            }
        }
        else{
            alert("An error has occured making the request");
        }
    }
}

【问题讨论】：

我们可以看一下 AJAX 请求代码吗？
也许esl.jpg 的URL 可能需要前导/？ images/esl.jpg 将查找相对于您正在查看的页面的图像子目录。右键单击“查看图像”是否实际显示图像？
@Drav 我添加了领先的/ 并且没有任何改变。但是，当我右键单击“查看图像”时，我得到一个 forbidden: you do not have permission to access /images/esl.jpg 知道为什么会这样吗？我不擅长权限。
确保 /images 文件夹和其中的所有文件都可由 Apache（或您使用的任何服务器）访问。通常将权限设置为 755 就可以了。
嘿，我 +1 询问您是否可以实际查看图像；）（假设文件的位置不存在，或者它是权限问题..因此问！）

标签： html ajax image innerhtml

【解决方案1】：

我会检查图像在这些场景中是否真正可见。检查它的一个好方法是右键单击并“查看图像...”。然后会要求您的浏览器专门请求该图像。

如果你得到Not Found请求的图片images/esl.jpg在这个服务器上没有找到，那么你的url不正确。

如果您收到Forbidden，您没有权限访问此服务器上的 images/esl.jpg。然后是权限问题。正如 Endophage 所说，您需要为 Apache 进程设置正确的文件和目录权限，以便能够查看该图像。

【讨论】：

【解决方案2】：

在使用 AJAX 时，您通常会忘记图像的位置与文档的位置相关。尝试从根位置引用图像，像这样..

../images/esl.jpg

【讨论】：

我在发帖之前想到了这个并尝试了它（不起作用），不过感谢您的回复！

【解决方案3】：

在我看来，图片实际上在 assets/images/esl.jpg 中，而不是 images/esl.jpg

考虑一下您的页面所在位置与您正在抓取的页面所在位置之间的区别...

【讨论】：