這個需求是這樣的,
希望在客製化區塊當中設定預設圖片,
而這個圖片應該要與區塊再一起,而不是使用 WordPress 的媒體庫
因此我就需要把圖片放在與區塊相同的資料夾底下。
並且使用動態的方式把圖片匯入。
然而我通常都會把 attribute 寫在 block.json
也因為這樣,變成無法使用動態資料,以後應該要將 attribute 寫在 index.js!
學到一課!
因為 js 可以使用 import 的方式把檔案匯入
import defaultImageURL from './home-1.jpeg';
因此非常簡單就可以將圖片丟進檔案當中。
最後只需要在 attribute 的地方設定 default 的數值
attributes: {
image: {
type: "object",
default: {
url: defaultImageURL
}
}
}
這樣就完成拉~
之後就可以在 edit.js 裡面使用 image.url 叫到預設圖片。
發佈留言