如何用JavaScript修改aria-hidden为false及解决移动端图片不显示问题

我使用集成式图片上传组件，无法获取完整原始HTML。目前遇到的问题是：上传的图片在桌面浏览器的移动端调试模式下可正常显示，但在真实移动设备中完全看不到。

已获取的相关代码 #

图片区域HTML代码 #

<span class="CaptureViewer-imageWrapper">    
    <div class="EnlargedPreview-container">
        <div tabindex="-1" aria-label="Photo of your document" aria-live="off" aria-expanded="false" role="img"></div>
        <button aria-labelledby="preview-button-label" class="EnlargedPreview-button EnlargedPreview-button-overlay">
            <span id="preview-button-label" class="EnlargedPreview-button-text">Enlarge image</span>
        </button>
    </div>
    <img class="CaptureViewer-image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgA" alt="Photo of your document" aria-hidden="true">
</span>

图片元素CSS代码 #

.CaptureViewer-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: .1875em;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: stretch;
    align-self: stretch;
    object-fit: contain;
    background-size: cover;
}

解决方案 #

一、修改aria-hidden属性的JavaScript实现 #

你提到尝试将aria-hidden设为false来解决，下面是两种可行的JS写法：

1. 监听图片加载事件（推荐）

适合图片加载后再修改属性，避免DOM元素未就绪的问题：

// 定位目标图片元素
const captureImage = document.querySelector('.CaptureViewer-image');
if (captureImage) {
  // 图片加载完成时修改属性
  captureImage.addEventListener('load', function() {
    this.setAttribute('aria-hidden', 'false');
  });
  // 若图片已提前加载完成，直接修改
  if (captureImage.complete) {
    captureImage.setAttribute('aria-hidden', 'false');
  }
}

2. 定时轮询（应对组件动态渲染）

如果图片是组件动态生成的，轮询可以确保找到元素后再修改：

const imageCheckTimer = setInterval(() => {
  const captureImage = document.querySelector('.CaptureViewer-image');
  if (captureImage) {
    captureImage.setAttribute('aria-hidden', 'false');
    clearInterval(imageCheckTimer); // 找到元素后停止轮询
  }
}, 200); // 每200毫秒检查一次DOM

二、其他排查方向 #

• 检查base64编码完整性：你提供的src中base64内容是截断的（/9j/4AAQSkZJRgA），真实场景下如果编码不完整，移动设备会无法解析图片。可以在控制台打印图片的src属性，确认字符串是否完整。
• 优化CSS移动兼容性：object-fit: contain在部分旧版移动浏览器兼容性不佳，可添加前缀或降级方案：

.CaptureViewer-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: .1875em;
    object-fit: contain;
    -webkit-object-fit: contain; /* 适配webkit内核移动浏览器 */
    height: auto; /* 兼容性降级 */
}

• 排查元素遮挡问题：真实设备上可能有上层元素（比如.EnlargedPreview-container）遮挡图片，可临时给图片添加更高层级测试：

.CaptureViewer-image {
    /* 原有CSS */
    z-index: 10;
}

• 验证MIME类型匹配：确认base64前缀的MIME类型（data:image/jpeg;base64,）和实际图片格式一致，比如PNG图片需改为data:image/png;base64,。

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