Add image in container

Hello! How we can do this, add a image in a container like a thumbnail.

10 Replies

- 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! - ✅ Marked as resolved by OP

Mafia•6mo ago

You need to use a section builder and add a thumbnail accessory

d.js docs•6mo ago

:method: SectionBuilder#setThumbnailAccessory() discord.js@14.19.3 Sets the accessory of this section to a thumbnail.

Mafia•6mo ago

Note: section must inclued at lest 1 text display

Mafia•6mo ago

https://discordjs.guide/popular-topics/display-components.html#thumbnail

discord.js Guide

Imagine a guide... that explores the many possibilities for your discord.js bot.

SabuOP•6mo ago

oh ty for the answer but i have a prblm with that

const mainSection = new SectionBuilder()
            .addTextDisplayComponents(
                textDisplay => textDisplay
                    .setContent(
                        "## Information sur YourBible \n\n" +
                        "YourBible is a Discord bot designed to help you read and understand the Bible daily.\n" +
                        "It offers features such as daily verses, Bible reading plans, and more."
                    )
            )
            .setThumbnailAccessory(
                thumbnail => thumbnail
                    .setDescription("YourBible Logo")
                    .setURL('https://cdn.discordapp.com/attachments/1386075711118250014/1386313622891794452/Nouveau_projet_2.png')
            );

        const appInfoSection = new SectionBuilder()
            .addTextDisplayComponents(
                textDisplay => textDisplay
                    .setContent(
                        `**Version:** ${process.env.VERSION || 'Non définie'}\n` +
                        `**Nombre de serveurs:** ${interaction.client.guilds.cache.size}\n` +
                        `**Nombre d'utilisateurs:** ${interaction.client.users.cache.size}\n` +
                        `**En ligne depuis:** ${formatUptime(interaction.client.uptime)}`
                    )
            );

        const setupContainer = new ContainerBuilder()
            .setAccentColor(0x252b34)
            .addSectionComponents(mainSection)
            .addSeparatorComponents(separator => separator)
            .addSectionComponents(appInfoSection);

        await interaction.reply({
            components: [setupContainer],
            flags: MessageFlags.IsComponentsV2 | MessageFlags.Ephemeral
        });

const mainSection = new SectionBuilder()
            .addTextDisplayComponents(
                textDisplay => textDisplay
                    .setContent(
                        "## Information sur YourBible \n\n" +
                        "YourBible is a Discord bot designed to help you read and understand the Bible daily.\n" +
                        "It offers features such as daily verses, Bible reading plans, and more."
                    )
            )
            .setThumbnailAccessory(
                thumbnail => thumbnail
                    .setDescription("YourBible Logo")
                    .setURL('https://cdn.discordapp.com/attachments/1386075711118250014/1386313622891794452/Nouveau_projet_2.png')
            );

        const appInfoSection = new SectionBuilder()
            .addTextDisplayComponents(
                textDisplay => textDisplay
                    .setContent(
                        `**Version:** ${process.env.VERSION || 'Non définie'}\n` +
                        `**Nombre de serveurs:** ${interaction.client.guilds.cache.size}\n` +
                        `**Nombre d'utilisateurs:** ${interaction.client.users.cache.size}\n` +
                        `**En ligne depuis:** ${formatUptime(interaction.client.uptime)}`
                    )
            );

        const setupContainer = new ContainerBuilder()
            .setAccentColor(0x252b34)
            .addSectionComponents(mainSection)
            .addSeparatorComponents(separator => separator)
            .addSectionComponents(appInfoSection);

        await interaction.reply({
            components: [setupContainer],
            flags: MessageFlags.IsComponentsV2 | MessageFlags.Ephemeral
        });

🚨 Erreur du client Discord : CombinedError (2)
  Received one or more errors

  1 ExpectedValidationError > s.instance(V)    
  |   Expected
  |
  |   Expected:
  |   | [Function: ButtonBuilder]
  |
  |   Received:
  |   | undefined

  2 ExpectedValidationError > s.instance(V)
  |   Expected
  |
  |   Expected:
  |   | [Function: ThumbnailBuilder]
  |
  |   Received:
  |   | undefined

    at _UnionValidator.handle (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:1965:23)
    at _UnionValidator.parse (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:90)
    at SectionBuilder.toJSON (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\dist\index.js:2169:37)
    at C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\dist\index.js:1870:64
    at Array.map (<anonymous>)
    at ContainerBuilder.toJSON (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\dist\index.js:1870:35)
    at C:\Users\lunal\Documents\YourBible\node_modules\discord.js\src\structures\MessagePayload.js:151:46
    at Array.map (<anonymous>)
    at MessagePayload.resolveBody (C:\Users\lunal\Documents\YourBible\node_modules\discord.js\src\structures\MessagePayload.js:150:49)
    at ChatInputCommandInteraction.reply (C:\Users\lunal\Documents\YourBible\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:198:56)

🚨 Erreur du client Discord : CombinedError (2)
  Received one or more errors

  1 ExpectedValidationError > s.instance(V)    
  |   Expected
  |
  |   Expected:
  |   | [Function: ButtonBuilder]
  |
  |   Received:
  |   | undefined

  2 ExpectedValidationError > s.instance(V)
  |   Expected
  |
  |   Expected:
  |   | [Function: ThumbnailBuilder]
  |
  |   Received:
  |   | undefined

    at _UnionValidator.handle (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:1965:23)
    at _UnionValidator.parse (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\node_modules\@sapphire\shapeshift\dist\cjs\index.cjs:972:90)
    at SectionBuilder.toJSON (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\dist\index.js:2169:37)
    at C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\dist\index.js:1870:64
    at Array.map (<anonymous>)
    at ContainerBuilder.toJSON (C:\Users\lunal\Documents\YourBible\node_modules\@discordjs\builders\dist\index.js:1870:35)
    at C:\Users\lunal\Documents\YourBible\node_modules\discord.js\src\structures\MessagePayload.js:151:46
    at Array.map (<anonymous>)
    at MessagePayload.resolveBody (C:\Users\lunal\Documents\YourBible\node_modules\discord.js\src\structures\MessagePayload.js:150:49)
    at ChatInputCommandInteraction.reply (C:\Users\lunal\Documents\YourBible\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:198:56)

Mafia•6mo ago

appInfoSection needs an accessory as well. if you dont want one just use textdisplay on its own

SabuOP•6mo ago

perrfeeeect ty

Mafia•6mo ago

SabuOP•6mo ago

have a good day 😉

Gaming

Programming

Add image in container

Did you find this page helpful?