图像源未在 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>'

          }

   ]

}

但这似乎也不起作用...是否有原因导致图像无法在这两种方法中渲染出来，有没有办法解决它？提前致谢。

Answer 1

您需要require字符串中的图像，以便 webpack 知道用图像的正确路径替换该位置。试试这个：&nbsp; <img src="' + require('../../../assets/tabnavigation/tabnavigation-toolbar.png') + '" width="100%" height="100%" alt="display of tab navigation toolbar"/>&nbsp;`满的content：content:&nbsp;'<h2&nbsp;class="mt-8">About</h2><p&nbsp;class="pt-5">Tabs&nbsp;are&nbsp;a&nbsp;form&nbsp;of&nbsp;secondary&nbsp;in-page&nbsp;navigation,&nbsp;helping&nbsp;to&nbsp;group&nbsp;different&nbsp;types&nbsp;of&nbsp;content&nbsp;in&nbsp;a&nbsp;limited&nbsp;space.</p><p&nbsp;class="pt-5">Use&nbsp;tabs&nbsp;to&nbsp;split&nbsp;long&nbsp;content&nbsp;into&nbsp;manageable&nbsp;chunks&nbsp;to&nbsp;avoid&nbsp;overwhelming&nbsp;the&nbsp;user.&nbsp;By&nbsp;default&nbsp;the&nbsp;first&nbsp;tab&nbsp;is&nbsp;selected.</p><v-card><v-col&nbsp;class="ml-0&nbsp;mt-3&nbsp;pt-8&nbsp;px-10&nbsp;pb-10&nbsp;imgBackground&nbsp;d-flex&nbsp;justify-center"><img&nbsp;src="'&nbsp;+&nbsp;require('../../../assets/tabnavigation/tabnavigation-toolbar.png')&nbsp;+&nbsp;'"&nbsp;width="100%"&nbsp;height="100%"&nbsp;alt="display&nbsp;of&nbsp;tab&nbsp;navigation&nbsp;toolbar"/></v-col></v-card>'