vue.js - How to require images directly into v-tabs v-tab-item content property?

Question

I have a <v-tabs> component set up to read in an object containing tab names and content to be displayed in the <v-tabs-items> tag. My code for the content display is as follows:

<v-tabs-items v-model="tab">
    <v-tab-item 
      v-for="tabItem in tabItems" 
      :key="tabItem.tab" 
      :href="'#tab-' + tabItem">
        <v-card flat>
            <v-card-text>{{ tabItem.content }}</v-card-text>
        </v-card>
    </v-tab-item>
</v-tabs-items>

When passing my items object to parse into the component, I have no problem passing the following:

        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-0">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 py-0 px-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>'

Only problem here is I've been told that injecting the require here isn't within my company's coding guidelines... Well, I've been told it's messy too due to the use of the two concatenation operators to build the string. And there's no current precedent for this situation as this is for a custom instance of the <v-tabs> component which I'm building for my company.

I've considered setting up an import of the image like so:

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

But after that I'm at a loss, because while I could try:

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-0">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 py-0 px-10 imgBackground d-flex justify-center"><img :src="tabNavToolbarImg" width="100%" height="100%" alt="display of tab navigation toolbar"/></v-col></v-card>'

But this code breaks the compiler as while I'm referencing tabNavToobarImg, it's as part of a string that hasn't rendered yet, so the compiler reports that the variable hasn't been used.

Is there a way around this that doesn't involve concatenating parts of the content string with + as per my previous (successful) instance of content?

question from:https://stackoverflow.com/questions/66055074/how-to-require-images-directly-into-v-tabs-v-tab-item-content-property

Answer 1

Waitting for answers