Loading og:image from assets in nuxt.config.js

Question

Is there a way to import an image and apply it to the og:image meta tag? I have the following nuxt.config.js:

module.exports = {
  mode: 'universal',

  head: {
    title: 'title name',
    meta: [
      // { hid: 'og:image', property: 'og:image', content: process.env.BASE_URL + ogImage },
    ],
  },

  // ...
};

In a normal vue project this is done easily by using import:

import ogImage from '@/path/to/image.png';

However, import statements aren't available in nuxt.config.js and using require only results in loading the binary, instead of the asset path.

Answer 1

Save the image in static folder.

Create a publicRuntimeConfig in nuxt.config.js

publicRuntimeConfig: { baseURL: process.env.NUXT_BASE_URL }

In the layout file add this:

head() {
  return {
    title: 'PAGE TITLE',
    meta: [ { hid: 'og:image', property: 'og:image', content: `${this.$config.baseURL}/logo.png` } ]
  }
}

Answer 2

Import statements are available in nuxt config since Nuxt 2.0. See release notes. But that wont work since there no loaders and other things are in place yet.

You could set it in your layout file.

  import ogImage from '@/path/to/image.png';
  export default {
  head () {
    return {
      meta: [
        { hid: 'og:image', property: 'og:image', content: this.BASE_URL+ ogImage }
      ]
    }
  },