JS设置display为inline时图片不显示 显隐切换功能异常

你的代码存在两个直接导致功能异常的问题：

• 状态变量open被定义在showHideM函数内部，每次点击按钮触发函数执行时，这个变量都会被重新创建并强制赋值为0，后续判断open == 1的隐藏分支永远不会触发，每次点击只会重复执行设置显示的逻辑，完全无法实现切换效果。
• 给图片设置display: inline不符合<img>作为可替换元素的渲染逻辑，img默认display属性为inline-block，强行设置为inline可能导致尺寸、布局渲染异常。你控制台能打印出display值为inline但页面看不到图，除了渲染问题外，也可以顺带排查下图片src路径是否正确、资源是否加载成功、父元素是否有裁切/隐藏属性影响图片展示。

把状态变量移到函数外层，保证每次点击时状态不会被重置，同时修正图片显示时的display属性值：

// 状态变量定义在函数外层，仅初始化一次，点击时不会被重置
let open = 0;
function showHideM(){
    const targetImg = document.getElementById("melmanId");
    if (open === 0){
        open = 1;
        targetImg.style.display = "inline-block"; 
        console.log(open, targetImg.style.display);
        return;
    }
    if (open === 1){
        open = 0;
        targetImg.style.display = "none";
    }
}

更简洁的实现方式：不需要额外维护状态变量，直接读取元素当前的display属性判断状态即可，能避免变量作用域、状态不同步的问题：

function showHideM(){
    const targetImg = document.getElementById("melmanId");
    targetImg.style.display = targetImg.style.display === "none" ? "inline-block" : "none";
}

如果修改后还是无法正常显示，打开浏览器开发者工具的Elements面板，选中对应img元素查看Computed下的实际生效样式，确认是否有其他CSS规则覆盖了display设置，同时在Network面板检查图片资源是否加载成功。

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