使用data-popup:lightbox弹窗失效，报错Not allowed to navigate top frame to data URL

你使用data-popup:lightbox实现图片弹窗时，图片无法正常显示，运行时出现以下错误：

Not allowed to navigate top frame to data URL: data:image/jpeg;base64,

你的代码如下：

<td>
  <a href="${data.trRadFoto}" data-popup="lightbox">
     <img src="${data.trRadFoto}" width="50px" alt="" class="img-preview rounded">
  </a>
</td>

问题原因 #

现代浏览器出于安全策略，禁止通过顶级框架导航到data URI格式的资源。你所用的lightbox插件应该是尝试直接将<a>标签的href（base64图片地址）作为弹窗页面打开，触发了这个限制，导致图片无法加载。

解决方案 #

1. 自定义点击事件绕过限制 #

阻止<a>标签的默认跳转行为，手动构建弹窗并加载图片：

修改HTML（添加自定义类名方便绑定事件）：

<td>
  <a href="${data.trRadFoto}" data-popup="lightbox" class="custom-lightbox">
     <img src="${data.trRadFoto}" width="50px" alt="" class="img-preview rounded">
  </a>
</td>

添加JavaScript逻辑：

// 绑定所有lightbox链接的点击事件
document.querySelectorAll('.custom-lightbox').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    const imgUrl = this.getAttribute('href');
    
    // 创建弹窗容器
    const lightboxOverlay = document.createElement('div');
    lightboxOverlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      cursor: pointer;
    `;
    
    // 创建弹窗内的图片元素
    const lightboxImg = document.createElement('img');
    lightboxImg.src = imgUrl;
    lightboxImg.style.cssText = `
      max-width: 90%;
      max-height: 90%;
      border-radius: 4px;
    `;
    
    // 点击弹窗关闭
    lightboxOverlay.addEventListener('click', () => {
      lightboxOverlay.remove();
    });
    
    lightboxOverlay.appendChild(lightboxImg);
    document.body.appendChild(lightboxOverlay);
  });
});

2. 更换兼容data URL的lightbox插件 #

如果不想手动写弹窗逻辑，可以选择原生支持加载data URI图片的lightbox工具（如Magnific Popup、Fancybox），这类插件会在弹窗内直接创建<img>元素加载图片，不会触发data URL的导航限制。

3. 转换base64为服务器文件（可选） #

如果项目允许，将前端的base64图片上传到服务器，生成普通的HTTP/HTTPS链接替换${data.trRadFoto}，原lightbox逻辑即可正常运行，同时也能减少页面加载体积。

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