专辑艺术未显示，使用Express.js，Node.js，Pug，JavaScript

Question

我正在尝试创建一个音乐应用程序，可以将音乐文件提供给音频元素。最终我想要一个客户端用户界面，它可以从播放列表中选择一首歌曲，甚至提供创建您自己的播放列表的可能性。这是一个学习node.js的个人项目。这只是一个有趣的挑战。

但现在专辑封面还没有显示。我刚刚得到破碎的图像

// var server=require('http');
var jsmediatags = require('jsmediatags');
var express= require('express');
var app=express();
var pug=require('pug');
const fs=require('fs');
const { error } = require('console');
var tagsArray=Array();

const port=3000;
const host='localhost';

app.use('/public',express.static('public'));
app.set('views','./views');
app.set('view engine', 'pug');

// var html="<h1>Hello</h1>"

// fs.writeFile('index.html',html, (error)=>{
//   if(error){
//     console.log(error)
//   }
//   else{
//     console.log("success")
//   }
// })

const server =app.listen(port, host, ()=>{

  console.log("server started at "+host+"port:"+port);

  
});

process.on('SIGTERM', () => {
  server.close(() => {
    console.log('Process terminated')
  })
})


jsmediatags.read("./public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3", {
  onSuccess: function(tag) {
    // console.log(tag);
    
    var tags=tag.tags;
    tagsArray=[tags.artist,tags.track,tags.album,tags.title,tags.picture];
    var artist=tags.artist;
    var album=tags.album;
    var title=tags.title;
    var track=tags.track;
    var base64Url=Buffer.from(tags.picture.data).toString("base64");
    var artInfo="data:"+tags.picture.format+";base64,"+base64Url;
    
    console.log(`data:${tags.picture.format};base64,`);

    app.get('/', (req, res)=>{

      res.render("index", {
        artist:tags.artist,
        album: tags.album,
        title: tags.title,
        track: tags.track,
        art: artInfo
        
      });
      console.log('done');
    });
    //   res.render('index');
    
    



  },
  onError: function(error) {
    console.log(':(', error.type, error.info);
  }
});

这是我的哈巴狗代码：

    html(lang="en")
head
    title Music App
body
    img#albumC(src="#{art}" alt='album art')
    h2 Artist: #{artist}
    h2 Album: #{album}
    h2 Song: #{title}
    h2 Track: #{track}
    audio(controls src="/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3")

Answer 1

如果我正确理解您的问题，那么问题是，对象“ tags.picture”无法正确传递给JS。
我可能会将“相册”函数移至Nodejs。类似的东西：

//...
jsmediatags.read("./public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3", {
    onSuccess: function(tag) {
    // console.log(tag);
    
    var tags=tag.tags;
    tagsArray=[tags.artist,tags.track,tags.album,tags.title,tags.picture];
    var artist=tags.artist;
    var album=tags.album;
    var title=tags.title;
    var track=tags.track;
    //Create a buffer, stringify it and format it to a data url.
    var art=`data:${tags.picture.format};base64,${Buffer.from(tags.picture.data).toString("base64")}`;
    // console.log(tags.picture);

    app.get('/', (req, res)=>{

      res.render("index", {
        artist:tags.artist,
        album: tags.album,
        title: tags.title,
        track: tags.track,
        art: art
        
      });
    });
    //   res.render('index');
  },
  onError: function(error) {
    console.log(':(', error.type, error.info);
  }
});    

然后在哈停码中，您只需要将其作为SRC传递：

doctype html
html(lang="en")
    head
        title Music App
    body
        img#albumC(src='#{art}' alt='')
        h2 Artist: #{artist}
        h2 Album: #{album}
        h2 Song: #{title}
        h2 Track: #{track}
        audio(controls src="/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3")