Image sources not rendering out within dynamic content in Vue and Vuetify

I’m currently working on a component that can render out tabs with respective HTML content using v-tab, v-tab-items and v-tab-item. Within the v-tab-item call I have the following reference:

<v-card flat>
  <v-card-text v-html="item.content"></v-card-text>
</v-card>

which renders out the HTML content defined in the items Object’s respective item through their content property as shown below:

data() { return tabNavToolbar: tabNavToolbarImg,
  items: [
          {
            tab: 'About',
            content: '<h2 class="mt-8">About</h2><p class="pt-5">Tabs are a form of secondary in-page navigation, helping to group different types of content in a limited space.</p><p class="pt-5">Use tabs to split long content into manageable chunks to avoid overwhelming the user. By default the first tab is selected.</p><v-card><v-col class="ml-0 mt-3 pt-8 px-10 pb-10 imgBackground d-flex justify-center"><img src="../../../assets/tabnavigation/tabnavigation-toolbar.png" width="100%" height="100%" alt="display of tab navigation toolbar"/></v-col></v-card>'
          }
   ]
}

However, the image isn’t rendering, in fact it comes through as broken even though if I reference the image URL directly in a standard img tag it will render correctly.

I tried the idea of importing the image and binding the respective variable like this:

import tabNavToolbarImg from '../../../assets/tabnavigation/tabnavigation-toolbar.png'

data() { return tabNavToolbar: tabNavToolbarImg,
  items: [
          {
            tab: 'About',
            content: '<h2 class="mt-8">About</h2><p class="pt-5">Tabs are a form of secondary in-page navigation, helping to group different types of content in a limited space.</p><p class="pt-5">Use tabs to split long content into manageable chunks to avoid overwhelming the user. By default the first tab is selected.</p><v-card><v-col class="ml-0 mt-3 pt-8 px-10 pb-10 imgBackground d-flex justify-center"><img :src="tabNavToolbar" width="100%" height="100%" alt="display of tab navigation toolbar"/></v-col></v-card>'
          }
   ]
}

but this appears not to work either… Is there a reason why images won’t render out in either of these methods, and is there a way to resolve it? Thanks in advance.

Answer

You’ll need to require the image within your string so webpack knows to substitute the location with the correct path to the image.

Try this: <img src="' + require('../../../assets/tabnavigation/tabnavigation-toolbar.png') + '" width="100%" height="100%" alt="display of tab navigation toolbar"/> `

Full content:

content: '<h2 class="mt-8">About</h2><p class="pt-5">Tabs are a form of secondary in-page navigation, helping to group different types of content in a limited space.</p><p class="pt-5">Use tabs to split long content into manageable chunks to avoid overwhelming the user. By default the first tab is selected.</p><v-card><v-col class="ml-0 mt-3 pt-8 px-10 pb-10 imgBackground d-flex justify-center"><img src="' + require('../../../assets/tabnavigation/tabnavigation-toolbar.png') + '" width="100%" height="100%" alt="display of tab navigation toolbar"/></v-col></v-card>'