v-tab我目前正在開發(fā)一個(gè)組件,該組件可以使用,v-tab-items和渲染帶有相應(yīng) HTML 內(nèi)容的選項(xiàng)卡v-tab-item。在v-tab-item通話中我有以下參考:<v-card flat> <v-card-text v-html="item.content"></v-card-text></v-card>items它通過對(duì)象的屬性渲染出對(duì)象各自項(xiàng)目中定義的 HTML 內(nèi)容,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>' } ]}然而,圖像沒有渲染,事實(shí)上,即使我直接在標(biāo)準(zhǔn)img標(biāo)記中引用圖像 URL,它也會(huì)正確渲染,但它還是被破壞了。我嘗試了導(dǎo)入圖像并綁定相應(yīng)變量的想法,如下所示: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>' } ]}但這似乎也不起作用...是否有原因?qū)е聢D像無(wú)法在這兩種方法中渲染出來(lái),有沒有辦法解決它?提前致謝。
圖像源未在 Vue 和 Vuetify 中的動(dòng)態(tài)內(nèi)容中呈現(xiàn)
SMILET
2024-01-18 09:41:59