Javascript 如何在图像标签中显示mp3文件中的图像

嗨，我试着用html和JS在图像标签中显示从mp3文件检索到的图像。这是我使用的代码

   async getImageFromUploadedFile(framesRetrieved){
        const imageArrayBufferRetrieved = framesRetrieved[4].value.data;
        var blob = new Blob([imageArrayBufferRetrieved]);
        var reader = new FileReader();
        reader.onload = function(event){
        var base64 =   event.target.result;
        };
        reader.readAsDataURL(blob);
    }

当我控制台base64映像时，我得到了类似的结果。

我尝试使用以下代码显示检索到的图像

            <Grid item xs={12}>
                <Grid item container xs={6}>
                <div id="title"></div>
               <img src="data:image/png;base64,base64"/>
               <div id="audioContainer"></div>
               <div id="lyricsContainer"></div>
                </Grid>
            </Grid>

但是图像不会出现在标记中。没有控制台错误。如果你能帮忙，那太好了。谢谢。

我可以用

首先，您必须使用

npm安装jsmediatags--save安装jsmediatags库

这是我用来获取mp3图像的代码

var jsmediatags=require（“jsmediatags”）；
新的jsmediatags.Reader（内容）
.setTagsToRead（[“标题”、“艺术家”、“图片”、“歌词”）。请阅读({
onSuccess:函数（标记）{
var tags=tag.tags；
var base64String=“”；
对于（var i=0；i

你说的是从mp3文件中获得像相册艺术这样的图像吗？这看起来很有用。这回答了你的问题吗？非常感谢你，我可以用github.com/aadsm/jsmediatags来完成。我想我用错了阅读器
  var jsmediatags = require("jsmediatags");

  new jsmediatags.Reader(content)
        .setTagsToRead(["title", "artist","picture","lyrics"]).read({
         onSuccess: function(tag) {

  var tags = tag.tags;

  var base64String = "";

  for (var i = 0; i < tags.picture.data.length; i++) {
    base64String += String.fromCharCode(tags.picture.data[i]);
  }
  var dataUrl = "data:" + tags.picture.format + ";base64," +window.btoa(base64String);

  document.getElementById('cover').setAttribute('src',dataUrl);
    },
    onError: function(error) {
      console.log(':(', error.type, error.info);
    }
  });