点击按钮仅显示标题无法显示图片，求JavaScript代码修复方案

你的代码里图片无法显示主要有两个问题：

• <img> 元素不能通过 innerHTML 设置内容，得修改它的 src 属性
• 文件输入框的 value 是浏览器为安全生成的伪路径，没法直接作为图片地址使用，得用 FileReader 读取本地文件生成可预览的Data URL

下面是修正后的完整代码：

HTML 部分 #

<!-- Input Area-->
<input type="text" id="imgTitle"/>
<input type="file" id="imagP" accept="image/*"/> <!-- 限制仅选择图片文件 -->
<button onclick="showImage()">Show Image</button>

<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage" alt="预览图片">

JavaScript 部分 #

function showImage() {
    // 处理标题显示
    document.getElementById('showTitle').textContent = document.getElementById('imgTitle').value;
    
    // 处理图片预览
    const fileInput = document.getElementById('imagP');
    const imgElement = document.getElementById('showImage');
    
    // 检查是否选择了文件
    if (fileInput.files.length > 0) {
        const file = fileInput.files[0];
        const reader = new FileReader();
        
        // 文件读取完成后设置图片src
        reader.onload = function(e) {
            imgElement.src = e.target.result;
        };
        
        // 以Data URL形式读取文件
        reader.readAsDataURL(file);
    } else {
        // 未选择文件时清空图片
        imgElement.src = '';
    }
}

关键修改点说明 #

• 给文件输入框加了 accept="image/*"，限制用户只能选择图片类型的文件
• 标题显示改用 textContent 替代 innerHTML，更安全（避免XSS风险）
• 使用 FileReader API读取本地图片文件，生成Base64格式的Data URL，赋值给img的src属性实现预览
• 增加了文件选择的判断，未选文件时清空图片

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