如何将图像直接要求到 v-tabs v-tab-item 内容属性中？

问题描述

我有一个 <v-tabs> 组件，用于读入一个对象，该对象包含要显示在 <v-tabs-items> 标签中的选项卡名称和内容。我的内容展示代码如下：

<v-tabs-items v-model="tab">
    <v-tab-item 
      v-for="tabItem in tabItems" 
      :key="tabItem.tab" 
      :href="'#tab-' + tabItem">
        <v-card flat>
            <v-card-text>{{ tabItem.content }}</v-card-text>
        </v-card>
    </v-tab-item>
</v-tabs-items>

在传递我的 items 对象以解析到组件中时，传递以下内容没有问题：

        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-0">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 py-0 px-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>'

这里唯一的问题是有人告诉我，在此处注入 require 不在我公司的编码指南之内...嗯，有人告诉我，由于使用了两个连接，这也很混乱运算符来构建字符串。目前还没有这种情况的先例，因为这是我为我的公司构建的 <v-tabs> 组件的自定义实例。

我考虑过像这样设置图像的导入：

import tabNavToolbarImg from '@/assets/tabnavigation/tabnavigation-toolbar.png';

但在那之后我不知所措，因为虽然我可以尝试：

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-0">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 py-0 px-10 imgBackground d-flex justify-center"><img :src="tabNavToolbarImg" width="100%" height="100%" alt="display of tab navigation toolbar"/></v-col></v-card>'

但是这段代码破坏了编译器，因为当我引用 tabNavToobarImg 时，它作为尚未呈现的字符串的一部分，因此编译器报告尚未使用该变量。

有没有办法不按照我之前（成功的）content 实例将 + 字符串的一部分与 content 连接？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）