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

我正在使用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?

});

你应该这样做

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文档对象一样处理它了

@toni您所说的DataOriginal是什么意思then@ToniHedataOriginal是自定义的attributedataOriginal来自我检查过的img标记：它是自动呈现的，因此每个标记都有一个空的src=，但是有文件路径的数据原件，这就是为什么我想知道如何才能将数据原件拉入src。@ToniHe ok抱歉，现在我理解了你的问题，我编辑了我的答案，这样它就可以工作了