請教大神Vite & Tailwind 背景圖片

vite vue3 tailwindcss

hihi 2022-06-27 10:51:23 ‧ 1119 瀏覽

分享至

需求:

使用Vite & vue3 & tailwindcss 環境需要 v-for 出背景圖片
(用tailwind bg-url[()]的寫法)

問題:

目前是將背景圖片路徑寫在data內，再用v-for的方式拿出來，可是網頁上沒有報錯也沒有警告，但是圖片也出不來，附上code圖片 & 瀏覽器styles、elements，求大神指點

咖咖拉 iT邦好手 1 級 ‧ 2022-06-27 13:21:41 檢舉

自刪

bendwarn iT邦新手 5 級 ‧ 2022-06-28 16:28:27 檢舉

預先處理本來就抓不到變數值

hihi iT邦新手 5 級 ‧ 2022-06-29 10:32:01 檢舉

bend大，所以真的是跟生命週期有關係嗎，可以稍微多指點一下嗎，謝謝您

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

greenriver

iT邦研究生 5 級 ‧ 2022-06-27 14:04:32

最佳解答

我試了也是不行。
bg-[url()]，裡面用變數，就沒有request..
應該是tailwind的function寫法，這就要交給大大們解答了。

不過改成用style就可以了

<section class="tw-w-full tw-h-full" v-for="(item,index) in items" :key="index">
    <div class="tw-w-full tw-h-screen tw-bg-no-repeat tw-bg-cover tw-bg-center tw-bg-local"
        :style="`background-image: url(${item.bg})`">
    </div>
</section>

回應 2
分享
檢舉

greenriver iT邦研究生 5 級 ‧ 2022-06-27 14:11:27 檢舉

後來想想應該跟vue-tailwind的生命週期有關

hihi iT邦新手 5 級 ‧ 2022-06-27 14:16:36 檢舉

先筆記起來... 感覺碰到坑了，有時間再來研究，十分感謝大大幫忙

登入發表回應

bendwarn

iT邦新手 5 級 ‧ 2022-06-30 02:54:54

不太懂生命週期指什麼。這裡只是build和runtime的差別，產生css的時候並沒有執行你的ts，不可能會知道變數有什麼值，只能像以前直接傳給style。

或者是用unocss的runtime，讓工具在線上一起跑

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙