discord.js - Imagine an app•11mo ago

Attaching local image file to embed

const imageFile = new AttachmentBuilder(`../../assets/war_ranks/${warRank}.png`, { name: `${warRank}.png` });

            const embed= new EmbedBuilder()
            .setTitle(`[${tag}] ${name}`)
            .setDescription(`${desc}`)
            .setThumbnail(`attachment://${imageFile.name}`);
            
            await interaction.channel.send({ embeds: [embed], files: [imageFile] });

const imageFile = new AttachmentBuilder(`../../assets/war_ranks/${warRank}.png`, { name: `${warRank}.png` });

            const embed= new EmbedBuilder()
            .setTitle(`[${tag}] ${name}`)
            .setDescription(`${desc}`)
            .setThumbnail(`attachment://${imageFile.name}`);
            
            await interaction.channel.send({ embeds: [embed], files: [imageFile] });

Errors:

CombinedError (2)
  Received one or more errors

  1 ValidationError > s.nullish
  |   Expected undefined or null
  |
  |   Received:
  |   | 'attachment://Platinum 4.png'

  2 ExpectedConstraintError > s.string.url
  |   Invalid URL
  |
  |   Expected: expected to match a URL
  |
  |   Received:
  |   | 'attachment://Platinum 4.png'

CombinedError (2)
  Received one or more errors

  1 ValidationError > s.nullish
  |   Expected undefined or null
  |
  |   Received:
  |   | 'attachment://Platinum 4.png'

  2 ExpectedConstraintError > s.string.url
  |   Invalid URL
  |
  |   Expected: expected to match a URL
  |
  |   Received:
  |   | 'attachment://Platinum 4.png'

12 Replies

d.js toolkit•11mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button!

samurai jack•11mo ago

im struggling to add a local image file to my embed as a thumbnail code and errors are shown catthumbshup

Syjalo•11mo ago

A URL can't contain spaces. Use decodeURI.

samurai jack•11mo ago

updated code:

const imageFile = new AttachmentBuilder(path.join(__dirname, `../../assets/images/${warRank}.png`), { name: `${warRank}.png` });

const embed = new EmbedBuilder()
  .setTitle(`[${tag}] ${name}`)
  .setDescription('abc')
  .setThumbnail(decodeURI(`attachment://${imageFile.name}`));

await interaction.channel.send({ embeds: [embed], files: [imageFile] });

const imageFile = new AttachmentBuilder(path.join(__dirname, `../../assets/images/${warRank}.png`), { name: `${warRank}.png` });

const embed = new EmbedBuilder()
  .setTitle(`[${tag}] ${name}`)
  .setDescription('abc')
  .setThumbnail(decodeURI(`attachment://${imageFile.name}`));

await interaction.channel.send({ embeds: [embed], files: [imageFile] });

im still receiving the same errors 🤔 oh when i swapped decodeURI for encodeURI it works now but for some reason its just posting the image as an attachment rather than making it the thumbnail of the embed 🤔 (this only happens when the file name has a space in it)

space•11mo ago

You also need to encode the file name in the attachment.

samurai jack•11mo ago

const imageFile = new AttachmentBuilder(encodeURI(path.join(__dirname, `../../assets/images/${warRank}.png`)), { name: `${warRank}.png` });

const imageFile = new AttachmentBuilder(encodeURI(path.join(__dirname, `../../assets/images/${warRank}.png`)), { name: `${warRank}.png` });

like this? or do you mean the actual name: part? if you do, then whats the purpose of that since its already being done in the .setThumbnail() line wait that doesnt even work the code that i whatakaren

space•11mo ago

Only the actual name, encoding the file path will probably only cause issues. The reason for this is that you need to provide the same name for the attachment and the reference for Discord to know that you want to reference the attachment.

samurai jack•11mo ago

ah i see updated code

const imageFile = new AttachmentBuilder(path.join(__dirname, `../../assets/images/${warRank}.png`), { name: encodeURI(`${warRank}.png`) });

const imageFile = new AttachmentBuilder(path.join(__dirname, `../../assets/images/${warRank}.png`), { name: encodeURI(`${warRank}.png`) });

didnt

space•11mo ago

rip

samurai jack•11mo ago

hm thanks for the help ig i will wait to see if anyone else knows im genuinely confused cuz when the file name of the image is Participation.png it sends as a thumbnail but if its Gold 1.png it sends as an attachment 🤔

Squid•11mo ago

Can you try warRank.replaceAll(' ', '_')? I believe that worked for me in the past, but I don't know for certain For the name, not the file path (iirc, but worth trying for both separately/together)

samurai jack•11mo ago

i’ll try in the morning and let you know what happens👍 didnt work 🤷‍♂️ its fine tho i just changed all the file names and added a - instead of the space thanks everyone

Gaming

Programming

Attaching local image file to embed