My welcome message is confusing. (Discord.js)

Question

I've a code that sends a message to a welcome channel:

import Discord from "discord.js"
const client = new Discord.Client()

client.on("guildMemberAdd", async member => {
   let bg = await jimp.read("img/img_bg.png") // Bg da imagem.
   if(guildId === "729008562747080836") {
       bg = await jimp.read("img/img_bg-thunder.png") // Bg da imagem da Thunder.
   }
   let font = await jimp.loadFont(jimp.FONT_SANS_32_WHITE) // Fonte usada na imagem.
   let mask = await jimp.read("img/img_mask.png") // Máscara da imagem.
   let welcomeImg = await jimp.read("img/img_txt-welcome.png") // Imagem dando boas-vindas.
   let name = member.user.username // Nome do novo membro.
   let lenName = name.length * 16 // "Calculando o tamanho" do nome.

   // Método usado para fazer a mensagem ao entrar no servidor. 
   await jimp.read(member.user.defaultAvatarURL).then(avatar => {
       avatar = member.user.displayAvatarURL() // Pega a URL da imagem.
       let avtUrl
       if(avatar.includes(".webp")) {
           avtUrl = avatar.substr(0, avatar.lastIndexOf(".")) + ".png" // Converte a extensão de .webp para .png.
       } else avtUrl = avatar
       jimp.read(avtUrl).then(avt => {
           avt.resize(250, 250) // Redimensiona o avatar.
           mask.resize(250, 250) // Redimensiona a máscara.
           welcomeImg.resize(280, 280) // Redimensiona a imagem de boas-vindas.
           avt.mask(mask) // Junta o avatar com a máscara.
           bg.composite(welcomeImg, 370, 210) // Adiciona a imagem de boas-vindas no background.
           bg.print(font, 512 - lenName / 2, 380, name) // Centraliza e escreve o nome da pessoa.
           bg.composite(avt, 387, 40) // Adiciona o avatar no background.

           // Guarda a imagem no arquivo "img_final.png".
           bg.write("img/img_final.png")
       }).catch(err => {
           console.log("Erro ao montar a imagem.")
           console.log(err)
       })
   }).catch(err => {
       console.log("Erro ao carregar a imagem.")
       console.log(err)
   })


   let channelWel = client.channels.cache.get(welcomeId)
   if(guildId === "729008562747080836") {
       await channelWel.send(`Olha só quem entou para a melhor e-team! 😍 Bem-vindo(a) <@${member.user.id}>!`, { files: ["img/img_final.png"] }) // Manda a mensagem e a foto para o canal.
   } else {
       await channelWel.send(`Olha só quem entou para o servidor! 😍 Bem-vindo(a) <@${member.user.id}>!`, { files: ["img/img_final.png"] }) // Manda a mensagem e a foto para o canal.
   }
})

It's working, but there is a problem I can't solve. When I enter the server it shows:

But when I enter the dyno bot or another user it shows:

When I enter again or another user:

It's always sending the previous user welcome image... I am hours and hours trying to solve this... help me!

(I'm Brazilian, so some words or sentences may be wrong.)

Answer 1

The issue seems to be in this section of code:

jimp.read(avtUrl).then(avt => {
    avt.resize(250, 250) // Redimensiona o avatar.
    mask.resize(250, 250) // Redimensiona a máscara.
    welcomeImg.resize(280, 280) // Redimensiona a imagem de boas-vindas.
    avt.mask(mask) // Junta o avatar com a máscara.
    bg.composite(welcomeImg, 370, 210) // Adiciona a imagem de boas-vindas no background.
    bg.print(font, 512 - lenName / 2, 380, name) // Centraliza e escreve o nome da pessoa.
    bg.composite(avt, 387, 40) // Adiciona o avatar no background.

    // Guarda a imagem no arquivo "img_final.png".
    bg.write("img/img_final.png")
}).catch(err => {
    console.log("Erro ao montar a imagem.")
    console.log(err)
})

You are not using await so the rest of the code doesn't wait for this section of code to execute. To fix this, you need to add in await and make the outer function asynchronous:

// Método usado para fazer a mensagem ao entrar no servidor.
await jimp.read(member.user.defaultAvatarURL).then(async avatar => {
    avatar = member.user.displayAvatarURL() // Pega a URL da imagem.
    let avtUrl
    if(avatar.includes(".webp")) {
        avtUrl = avatar.substr(0, avatar.lastIndexOf(".")) + ".png" // Converte a extensão de .webp para .png.
    } else avtUrl = avatar
    await jimp.read(avtUrl).then(avt => {
        avt.resize(250, 250) // Redimensiona o avatar.
        mask.resize(250, 250) // Redimensiona a máscara.
        welcomeImg.resize(280, 280) // Redimensiona a imagem de boas-vindas.
        avt.mask(mask) // Junta o avatar com a máscara.
        bg.composite(welcomeImg, 370, 210) // Adiciona a imagem de boas-vindas no background.
        bg.print(font, 512 - lenName / 2, 380, name) // Centraliza e escreve o nome da pessoa.
        bg.composite(avt, 387, 40) // Adiciona o avatar no background.

        // Guarda a imagem no arquivo "img_final.png".
        bg.write("img/img_final.png")
    }).catch(err => {
        console.log("Erro ao montar a imagem.")
        console.log(err)
    })
}).catch(err => {
    console.log("Erro ao carregar a imagem.")
    console.log(err)
})