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>' } ]}但這似乎也不起作用...是否有原因導致圖像無法在這兩種方法中渲染出來,有沒有辦法解決它?提前致謝。
圖像源未在 Vue 和 Vuetify 中的動態內容中呈現
SMILET
2024-01-18 09:41:59