ID3 - base64 不能设置为 img 的 src

Posted 2023-03-07

【中文标题】ID3 - base64 不能设置为 img 的 src

【英文标题】：ID3 - base64 cannot set as src for img

【发布时间】：2016-09-21 00:37:40

【问题描述】：

我刚刚通过 ID3 API 获取音频文件的封面。 由 API 创建的 base64 非常好，不能在 img 标签的 src 中声明。该脚本甚至不会尝试为img 标签设置新的src。

https://github.com/aadsm/javascript-ID3-Reader

这是我的尝试：

<a class="uploaded_file"><img src="/symbol/audio.png"></a>

function getAudioCover(url) 
 var tags = ID3.getAllTags(url);

 var image = tags.picture;
 if (image) 
    var base64String = "";
    for (var i = 0; i < image.data.length; i++) 
        base64String += String.fromCharCode(image.data[i]);
    
    var base64 = "data:" + image.format + ";base64," +
    window.btoa(base64String);
    return base64;
 
 else 
    return "/symbol/audio.png";
 


var uploadedFiles = 0;
var file_cover;
ID3.loadTags("audio.mp3", function() 
 file_cover = getAudioCover("audio.mp3");
 console.log(file_cover);
, 
 tags: ["picture"]
);
$('.uploaded_file:eq(' + uploadedFiles + ')').find('img').attr("src", file_cover);

控制台告诉我这个：https://jsfiddle.net/f1wzbtyh/

我如何让它工作？

jquery 或 src 属性是否存在字符串长度溢出？

【问题讨论】：

链接的 jsfiddle 上的 data URL 是一个有效的图像文件。您是否尝试将$('.uploaded_file:eq(' + uploadedFiles + ')').find('img').attr("src", file_cover); 放在.loadTags 回调函数中？

是的，先生，试过但没有用。

“试过但没用。” 你能创建一个 jsfiddle 来演示吗？你是如何检索到data URI 的？ console.log(file_cover) 是否在 .loadTags 回调日志中 data URI console？

我真的很想，但我只是在本地（本地主机）拥有所有这些东西。你有 API 和脚本。您可以自己尝试一下，然后您可以相信我这行不通，至少在 chrome 上不行。

length:0 表示该元素在函数调用时document中不存在

【参考方案1】：

在回调函数中调用.attr()。在.loadTags 调用之外引用时，file_cover 可能未定义。

ID3.loadTags("audio.mp3", function() 
 file_cover = getAudioCover("audio.mp3");
 console.log(file_cover);
 $('.uploaded_file:eq(' + uploadedFiles + ')')
 .find('img').attr("src", file_cover);
, 
 tags: ["picture"]
);