如何在PHP+HTML聊天系统中将<img>标签转为实际图片？

核心原因 #

你使用document.createTextNode()创建内容时，浏览器会把所有传入的字符串当成纯文本处理，包括<img>标签，自然不会解析成图片元素。

解决方案1：直接使用innerHTML（快速修复） #

修改createDiv函数，用innerHTML替代createTextNode，让浏览器自动解析HTML标签：

function createDiv(divText, divName, divPicture, name){
    let child = document.createElement("div");      
    // 直接插入HTML内容，浏览器会解析<img>标签
    child.innerHTML = `${divPicture} ${divName}: ${divText}`;         
    document.getElementById("myDiv").appendChild(child);
}

⚠️ 注意：这种方式存在XSS风险，如果后端返回的内容（比如用户名、消息文本）包含恶意HTML代码，会被直接执行。必须确保从ajax.php返回的所有数据都是经过转义或完全可信的。

解决方案2：手动创建元素（更安全灵活） #

更好的做法是后端不要返回完整的<img>标签，只返回头像的src、alt等属性值，前端手动创建图片元素，既能避免XSS，也方便控制样式：

步骤1：修改后端ajax.php #

调整返回的数据格式，改为按「消息文本::用户名::头像src::头像alt」的结构返回（示例：Hello::John::uploads/defaultpp.png::Profile Picture）。

步骤2：修改前端代码 #

更新load函数的循环逻辑，以及createDiv函数：

function load(name){ 
    getText("ajax.php");    
    async function getText(file) {    
        let myObject = await fetch(file);     
        let myText = await myObject.text(); 
        const myArray = myText.split("::");
        // 每4个元素为一组：文本、用户名、头像src、头像alt
        for (let i = 0; i < myArray.length - 3; i += 4) {
            createDiv(myArray[i], myArray[i+1], myArray[i+2], myArray[i+3], name);
        }
    }
}

function createDiv(divText, divName, avatarSrc, avatarAlt, name){
    let child = document.createElement("div");      
    // 创建头像图片元素
    let avatarImg = document.createElement("img");
    avatarImg.src = avatarSrc;
    avatarImg.alt = avatarAlt || "Profile Picture";
    avatarImg.className = "pic"; // 自定义样式类，方便CSS控制大小
    
    // 创建用户名和消息文本的容器
    let contentSpan = document.createElement("span");
    contentSpan.textContent = `${divName}: ${divText}`;
    
    // 组装元素
    child.appendChild(avatarImg);
    child.appendChild(contentSpan);
    
    // 添加到页面
    document.getElementById("myDiv").appendChild(child);
}

这种方式的优势：

• 完全避免XSS风险，textContent只会渲染纯文本
• 可以通过CSS灵活控制头像样式（比如把原来的width/height写在CSS里，比硬编码在标签里更易维护）
• 数据传输更高效，不需要传递完整的HTML标签

为什么你之前的尝试失败？ #

你之前用new Image()时，把整个<img src='...'>字符串赋值给了img.src，浏览器会把这个字符串当成图片URL去请求，显然不存在这样的文件，所以只会显示空白框。正确的做法是把头像的路径字符串（比如uploads/defaultpp.png）赋值给img.src。

内容的提问来源于stack exchange，提问作者Maya