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.
Solved but davydnorris in this github issue comment. Answer is content: 'https://www.brianssparetime.com' + require(\@/content${this.post.dir}/${this.post.image}`)`