图像源未在 Vue 和 Vuetify 中的动态内容中呈现

Question

我目前正在开发一个组件，该组件可以使用 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>

通过 content 属性呈现 items 对象各自项目中定义的 HTML 内容，如下所示：

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

图像源未在 Vue 和 Vuetify 中的动态内容中呈现

Image sources not rendering out within dynamic content in Vue and Vuetify

javascript

image

vue.js

vuetify.js

vuetify-tabs