CImage not working in Nuxt project. Src not showing in image.

I have a working Vue project that I am trying to convert over to using Nuxt. In the navbar of the site I have an image for a logo, this logo shows properly in the Vue project but not in the Nuxt project. After following both the suggested methods for handling images in the Chakra UI Vue docs as well as in the Nuxt docs I cannot get the image to show in the Nuxt project. When inspecting the image element I can see that the src attribute is never added. I also see this behavior with images on the Chakra UI Vue website where the image used in the examples do not appear and do not have a src attribute. I am not sure if this is an error on my part or an issue with Chakra but any help would be appreciated.

• Mac OS Catalina 10.15.7
• Webstorm 2021.1
• @nuxt/cli v2.15.6

Nuxt layout default.vue

<template>
    <CThemeProvider>
      <CColorModeProvider>
        <CBox font-family="body" as="main">
          <CReset/>
          <CFlex>
            <CLink href="#" w="100%">
              <CImage
                :src="require('@/assets/runic-logo.svg')"
                alt="runic logo"
                :width="['15%', '50%', '7%', '8%', '3%']"
                v-anime="{
            opacity: [0, 1],
            duration: 1500,
            delay: 300,
          }"
              />
            </CLink>
            <Nav/>
          </CFlex>
          <Nuxt/>
        </CBox>
      </CColorModeProvider>
    </CThemeProvider>
</template>

nuxt.config

import customTheme from './assets/customTheme.js'

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'nuxt-portfolio',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/scss/styles.scss'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/anime.js'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: {
    dirs: [
      '~components',
      '~/components/about',
      '~/components/home',
      '~/components/nav',
      '~/components/skills',
    ],
  },

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/chakra
    '@chakra-ui/nuxt',
    // https://go.nuxtjs.dev/emotion
    '@nuxtjs/emotion',
  ],

  chakra: {
    extendTheme: customTheme
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

[DRD161]

@peoray awesome! Thanks for the quick fix! Keep up the great work guys!

[peoray]

@DRD161 The issue has been fixed. All you have to do is update Chakra to the latest version