The url I created with '/gist' appears broken inside the issue

In my interface project, I want to take a screenshot of the current screen and create an issue in the related repository of the project on GitHub with a filled-in title and description. I tried to write a service that does this. As a result of my research, I found that I need to use '/gists' to add an image to the issue.

I create a URL using Gist. However, in the issue, this URL appears broken. When I visit the URL, I encounter base64. Base64 gives me the image itself. How can I display an image created with /gist in an issue without it appearing broken?

Here is my code.

app.post('/create-issue',upload.single('file'), async (req, res) => {
  const file = req.file;
  const {title,issue} = req.body; 

  if (!file) return res.status(400).send('No file uploaded.');

  try {
    const filePath = path.join(__dirname, 'uploads', file.filename);
    const fileContent = fs.readFileSync(filePath);

    const response = await githubApi.post('/gists', {
      description: 'Issue image upload',
      public: true,
      files: {
        [file.originalname]: {
          content: 'data:image/png;base64,'+fileContent.toString('base64'),
        },
      },
    });
    
    // const gistUrl = response.data.html_url;
    const imageFile = response.data.files[file.originalname];
    const imageUrl = imageFile.raw_url;
    fs.unlinkSync(filePath);
    const issueBody = `${issue}\n\n![Error Image](${imageUrl})`;

    try {
      const _resp = await githubApi.post(`/repos/${GITHUB_ORG}/${GITHUB_REPO}/issues`, {
        title: title,
        body: issueBody,
      });

      res.json(_resp.data);
    } catch (error) {
      console.error('Error creating issue:', error.response.data);
      res.status(500).send('Failed to create issue.');
    }

  } catch (error) {
    console.error('Error uploading image:', error.response.data);
    res.status(500).send('Failed to upload image.');
  }
});

Currently, when I try to create an issue, it looks like this

I thought about creating a new repository and uploading the images there, but I don't want a repository that only contains images. When I tried this, I encountered the following error:

Error uploading image: {
  message: 'Could not create file: Changes must be made through a pull request.',
  documentation_url: 'https://docs.github.com/articles/about-protected-branches',
  status: '409'
}

I want the link created with Gist to be displayed as an image in the issue.

I couldn’t solve my problem using the /gist service. Therefore, since I didn’t want to use third-party services like Imgur, I preferred to create a new repository and push the images to this repository. However, when I tried to push to the main or master branches, I encountered an error because those branches were protected. So, I created a new branch and pushed to that branch. With the download_url information returned in the response, I was able to add the image to the issue without any issues.

app.post('/create-issue',upload.single('file'), async (req, res) => {
  try{
    const file = req.file;
    const {title,issue} = req.body; 
    const unique = Date.now()

    if (!file) return res.status(400).send('File not uploaded');
    else if (!title) return res.status(400).send('Title is required');
    else if (!title) return res.status(400).send('Comment is required');

    const filePath = path.join(__dirname, 'uploads', file.filename);
    const fileContent = fs.readFileSync(filePath);

    try {
      const fileNameWithUnique = `${path.basename(file.originalname, path.extname(file.originalname))}-${title}${path.extname(file.originalname)}.png`;

      const data = {
        message: `${unique}-${title}.png added`,
        content: fileContent.toString('base64'),
        branch:'image'
      };
      const response = await githubApi.put(`/repos/${process.env.GITHUB_ORG}/${process.env.GITHUB_IMAGE_REPO}/contents/${fileNameWithUnique}`, data);
      const imageUrl = response?.data?.content?.download_url || '';
      
      if(!imageUrl) res.status(500).send('Image source not found');

      const issueBody = `![Error Image](${imageUrl})\n\n\n\n${issue}`;
      try {
        const _resp = await githubApi.post(`/repos/${process.env.GITHUB_ORG}/${process.env.GITHUB_REPO}/issues`, {
          title: title,
          body: issueBody,
        });
        fs.unlinkSync(filePath);
        res.json(_resp.data);
      } catch (error) {
        fs.unlinkSync(filePath);
        console.error('Error creating issue:', error.response.data);
        res.status(500).send('Failed to create issue.');
      }
    } catch (error) {
      fs.unlinkSync(filePath);
      console.error('Error uploading image:', error);
      res.status(500).send('Failed to upload image.');
    }
  }catch(err){
    res.status(500).send('Something went wrong');
  }
});