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

Question

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.

score 2 · Accepted Answer · edited Dec 24 '20 at 02:31

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>'

That's done it! Although you missed a single quote in your answer, I've corrected it for you, but this did the trick! Thank you! — Eliseo D'Annunzio, Dec 24 '20 at 01:14

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

1 Answers1