Cover photo for post

[ItsJamesMurray]

Hiya!

How am I able to reference a local image for the cover photo in the frontmatter rather than an externally hosted image?

For example, I have my post in content/posts/example-post.md. I have a photo I'd like to set as the cover photo in content/posts/img/header.jpg. Setting the frontmatter as cover: './img/header.jpg' does not work even though it will work if I reference it like that in the markdown post itself.

Thanks in advance!

[ItsJamesMurray]

Hi everyone! Bumping this up :)

[cossssmin]

Hi there! This isn't something specific to this starter, I suggest asking this in the Gridsome repo or on their Discord channel. Might have to do with either core Gridsome or the markdown source plugin.

[edm00se]

@ItsJamesMurray A heavy-handed work around for this is to place your cover images under the static/ directory.

*for now, until it's fixed properly

[bryandugan]

Here's a workaround I came across in case anyone else is still having this issue.

I got it to work with the following Gridsome plugin:
https://gridsome.org/plugins/gridsome-plugin-blog-cover

Detailed Instructions

1.) Add gridsome-plugin-blog-cover": "^0.0.1-beta, to your package.json.
2.) Run yarn install
3.) In your blog post have your image setup like so: cover: ./image-name.png
4.) In the metadata portion of Post.vue, replace it with this.

ogImageUrl() {
        let coverObj =  this.$page.post.cover
        if (coverObj) {
           return `${this.config.siteUrl + coverObj.src}`
        } else {
          return `${this.config.siteUrl}/static/images/sharing-card.png`
        }
      }

5.) Run gridsome develop and it should load the image.