图像源未在 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 知道用图像的正确路径替换该位置。

试试这个：  <img src="' + require('../../../assets/tabnavigation/tabnavigation-toolbar.png') + '" width="100%" height="100%" alt="display of tab navigation toolbar"/> `

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