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

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

If you want to put the image to the og:image meta tag, you should move your image to the static folder because the static directory is directly mapped to the server root. Here you can see the example for my setting.

After you run generate script, you can go to dist folder to open the index.html of your page, you will see the image url change to the root.

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