Json檔案內容如何放在圖片路徑呢?

javascript

帥帥大阿湯 2023-06-03 13:24:25 ‧ 1244 瀏覽

分享至

各位大大好!Json檔案內容要如何放圖片路徑呢?我想做按一下nav選單後，用fetch()讀Json檔案，Json檔案內容是名字:照片路徑，一個div顯示名字，另一個div顯示圖片。

登入發表討論

直播研討會

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

直播中

2 個回答

deh

iT邦研究生 1 級 ‧ 2023-06-03 19:53:09

假設json長這樣

json
{
  "name": "John",
  "imagePath": "images/john.jpg"
}

那就

fetch('你的json')
  .then(response => response.json())
  .then(data => {
    let name = data.name;
    let imagePath = data.imagePath;
    document.getElementById('nameDiv').innerHTML = name;
    document.getElementById('imageDiv').innerHTML = `<img src="${imagePath}" alt="${name}">`;
  })
  .catch(error => console.error(error));

回應 1
分享
檢舉

帥帥大阿湯 iT邦新手 4 級 ‧ 2023-06-03 20:49:10 檢舉

謝謝您

登入發表回應

brooklyn43

iT邦見習生 ‧ 2023-06-04 03:10:31

Read the json content from file .
Deserialize the content into object .
Add a new property named image in model and assign the value to it .
Serialize the object into json string .
Write the string into file .