亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

圖像源未在 Vue 和 Vuetify 中的動態內容中呈現

圖像源未在 Vue 和 Vuetify 中的動態內容中呈現

SMILET 2024-01-18 09:41:59
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>'          }   ]}但這似乎也不起作用...是否有原因導致圖像無法在這兩種方法中渲染出來,有沒有辦法解決它?提前致謝。
查看完整描述

1 回答

?
當年話下

TA貢獻1890條經驗 獲得超9個贊

您需要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>'



查看完整回答
反對 回復 2024-01-18
  • 1 回答
  • 0 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號