javascript - Vue および Vuetify の動的コンテンツ内で画像ソースがレンダリングされない

Question

私は現在v-tab、v-tab-itemsとを使用して、それぞれの HTML コンテンツでタブをレンダリングできるコンポーネントに取り組んでいますv-tab-item。呼び出し内でv-tab-item、次の参照があります。

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

以下に示すように、プロパティをitems介してオブジェクトのそれぞれの項目で定義された HTML コンテンツをレンダリングします。content

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

ただし、画像はレンダリングされません。実際には、標準imgタグで画像の URL を直接参照しても正しくレンダリングされますが、壊れているように見えます。

画像をインポートして、それぞれの変数を次のようにバインドするというアイデアを試しました。

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

しかし、これもうまくいかないようです...これらの方法のいずれかで画像がレンダリングされない理由はありますか?それを解決する方法はありますか? 前もって感謝します。