Javascript 未在Vue和Vuetify中的动态内容中渲染的图像源

我目前正在开发一个组件，该组件可以使用

v-tab

、

v-tab-items

和

v-tab-item

呈现具有各自HTML内容的选项卡。在

v-tab-item

调用中，我有以下参考：

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

但是，图像没有呈现，事实上，即使我在标准的

img

标记中直接引用图像URL，它也会正确呈现

我尝试了导入图像并绑定相应变量的想法，如下所示：

从“../../../assets/tabnavigation/tabnavigation toolbar.png”导入tabNavToolbarImg

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

data（）{返回tabNavToolbar:tabNavToolbarImg，
项目：[
{
标签：'关于'，
内容：“关于
选项卡是页面导航中的一种辅助形式，有助于在有限的空间内对不同类型的内容进行分组。
使用选项卡将长内容拆分为可管理的块，以避免压倒用户。默认情况下，选择第一个选项卡。
'
}
]
}

---

但这似乎也不起作用。。。这两种方法中的任何一种都无法渲染图像，这有什么原因吗？有没有解决方法？提前感谢。

您需要

要求字符串中的图像

，以便webpack知道用图像的正确路径替换位置

试试这个：

`

完整的

内容

：

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

content:“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="' + require('../../../assets/tabnavigation/tabnavigation-toolbar.png') + '" width="100%" height="100%" alt="display of tab navigation toolbar"/></v-col></v-card>'