REACT 中的图像解析、格式化、渲染

Question

我正在使用 DomParser 将 'text/html' 格式的文档导入到 REACT 中以使用它，到目前为止，所有文本和表格都已使用此方法很好地格式化，但是我无法显示图像起来，因为当我检查图像元素时它没有显示，原因如下：

我的问题是，我将如何制作 img.src = img.data-original ？有没有一种快速的方法可以将原始数据导入 src？

我尝试的是：img.src = img.dataOriginal;这是未定义的。请参阅下面的代码。

function format(file) {
  if(file === null) return; 

  const document = new DomParser().parseFromString(file, 'text/html'); 

  // text table format 
  document.querySelectorAll('table').forEach((table) => {
    table.className = 'table'; 
  }); 

  // img 
  document.querySelectorAll('img').forEach((img) => {
     img.className = 'img'; 
     img.src = img.dataOriginal; // this is undefined - is there a way to get data-original into src?

});

Answer 1

你应该这样做

function format(file) {
  if(file === null) return; 

  const document = new DomParser().parseFromString(file, 'text/html'); 

  // text table format 
  document.querySelectorAll('table').forEach((table) => {
    table.className = 'table'; 
  }); 

  // img 
  document.querySelectorAll('img').forEach((img) => {
     img.className = 'img'; 
     img.src = img.getAttribute('data-original');
     // or img.src = img.dataset.original;
});

DOMParser 为您返回 DOM，因此您可以像使用常规 DOM（文档对象）一样使用它