Problem when embedding images on Discord Webhook (Image hosted on a WordPress website)

I’m trying to send embedded information to my Discord guild by using Webhooks, but I can’t seem to embed successfully the image I’m hosting on my website, although an image hosted in imgur works as expected (which unfortuntely is not an option for me, as I’m trying to send POST requests when an author adds new content in WordPress).

Here’s a simplified version of the code bellow written in javascript (Node):

import fetch from "node-fetch";
let myOwnImage = 'https://caravanadoabsurdo.com.br/wp-content/uploads/2021/09/logo_no_background-escuro-1.png'
let imgurImage = 'https://i.imgur.com/AfFp7pu.png'
let imageToUse = myOwnImage

const jsonToSend = {
  "content": "There is a new post in the blog!",
  "embeds": [{
    "type": "rich",
    "url": "https://google.com",
    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat",
    "author": {
      "name": "Me",
      "url": "https://facebook.com",
      "icon_url": imageToUse
    },
    "image": {
      "url": imageToUse
    },
    "thumbnail": {
      "url": imageToUse
    },
    "footer": {
      "text": "Website name",
      "icon_url": imageToUse
    }
  }]
}

let options = {
  "method": 'POST',
  "headers": {
    "content-type": "application/json"
  },
  body: JSON.stringify(jsonToSend)
}

fetch('https://discord.com/api/webhooks/token/id', options).then((res, err) => {
  console.log(res, err)
})

Please note: that on the line let imageToUse = myOwnImage I’m quickly switching the images I’m trying to embed on many different parts of the message to send to discord. Please note 2: the link https://discord.com/api/webhooks/token/id is a default Webhook, in order to test it yourself, you would need to generate your own Webhook link in a channel that you have access too.

When using myOwnImage, I get the following result in my discord channel:

enter image description here

Now when I switch to imgurImage, the results is exactly how I wanted it to be, like the image below:

enter image description here

This behaviour is raising many questions for me, all the which I have no idea how to answer:

  1. Why is the image coming from my own website not being embed correctly under “image” and “tumbnail”, even though the instruction under Discord Developer Portal is the same for all attributes, such as here and here (both of them have the following description: “url of image (only supports http(s) and attachments)”
  2. Why is the imgur image working perfectly in that scenario?
  3. Why does Discord doesn’t return an error when an image is not able to be embedded?

PS: I have already tried using other images hosted outside of my website (with transparent background, bigger than 5k px and so on, but all of them worked fine). PS2: I did try using services such as Discohook (to check if I was maybe writing the body JSON wrong) but I ended up with the same result.

Any insights would be greatly appreciated.

Leave a Comment