¿Cómo obtengo una representación de cadena de la ubicación final de una imagen implementada que puedo proporcionar al código de encabezado og:image y hacer que og:header apunte a la URL correcta cuando se implemente?

Tengo un sitio web que se basa en Nuxt.js y Nuxt Content. Para mantener las cosas organizadas, modifiqué la configuración habitual de nuxt para poder agrupar los archivos .md de publicación y las imágenes a las que hacen referencia en una sola carpeta, en lugar de mantener todas las imágenes en una carpeta separada /static o /assets. El sitio se implementa en netlify en modo estático/generado.

Cuando comparto una publicación, quiero que servicios como reddit seleccionen una imagen en miniatura adecuada, por lo que quiero configurar encabezados og:image en cada publicación.

Código Github aquí . Las publicaciones están en /content/posts y uso el componente v-img en los archivos de descuento para mostrar imágenes en la carpeta de esa publicación.

Descubrí cómo agregar og: encabezados de imagen en el archivo slug para publicaciones :

 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 } ] } }

Sin embargo, cuando se implementa el blog, esto no funciona porque el enlace de la imagen implementada cambia. Por ejemplo, en el modo de desarrollo, this.post.image podría apuntar a pos_DSC01447.jpg, pero en el sitio implementado, la imagen se movió a pos_DSC01447.37e98b4.jpg, donde ese bit adicional cambia con cada implementación. En la versión implementada, this.post.image carece de este bit adicional, lo que genera direcciones URL incorrectas para og:image.