How do I get a string representation of a deployed image's final location that I can supply to the og:image header code and have the og:header point to the correct url when deployed?

I have a website that is based on Nuxt.js and Nuxt Content. To keep things organized, I have modified the usual nuxt set up so that I can bundle post .md files and the images they reference into a single folder, rather than keeping all images in a separate /static or /assets folder. The site is deployed on netlify in static/generate mode.

When I share a post, I want services like reddit to select an appropriate thumbnail image, so I want to configure og:image headers on each post.

Github code here. The posts are in /content/posts, and I use the v-img component in the markdown files to show images in that post's folder.

I've figured out how to add og:image headers this in the slug file for posts:

  head () {
    return {
      title: this.post.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.post.description
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: 'https://brianssparetime.com/_nuxt/content' + this.post.dir + '/' + this.post.image
        }
      ]
    }
  }

However, when the blog is deployed, this does not work because the deployed image link changes. For example, in dev mode, this.post.image might point to pos_DSC01447.jpg, but in the deployed site, the image has been moved to pos_DSC01447.37e98b4.jpg where that additional bit changes with each deploy. In the deployed version, this.post.image lacks this additional bit, leading to incorrect urls for og:image.