無法使用通過 jQuery 在 JSON 中配置的 URL 渲染圖像

Question

我從 JSON 文件中獲取了圖像鏈接，並在 HTML 的img標記的src屬性中提供了它們，但在執行時收到錯誤404 undefined 。

JSON 文件

[
  {
    "name": "Default",
    "author": "Jellyfin",
    "description": "Default, stock, Jellyfin.",
    "defaultCss": "",
    "options": [],
    "preview": {
      "home": "",
      "title": ""
    }
  },
  {
    "name": "JellyFlix",
    "author": "prayagprajapati17",
    "description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
    "defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);",
    "options": [],
    "preview": {
      "home": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true",
      "title": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TitlePage.png?raw=true"
    }
  }
]

我的 JSON 文件鏈接https://raw.githubusercontent.com/prayag17/jellyfin-plugin-skin-manager/cssEditor/skins-3.0.Z466DEEC76ECDF5FCA6D338

jQuery 代碼片段以在圖像中設置 URL（在 HTML 文件中使用）：

$('div.preview').append('<img src="' + preview.home + '" id="home"><img src="' + preview.title + '" id="title">');

和 HTML 塊用於顯示圖像：

<div class="preview" id="preview"></div>

請幫助我知道我在代碼中缺少什么。 提前致謝

Answer 1

試試看並在編輯器中查看代碼。

您試圖直接從數組訪問，您正在查看的圖像 url 位於數組的第二個元素中。

 $(document).ready(function(){ var myObj = [ { "name": "Default", "author": "Jellyfin", "description": "Default, stock, Jellyfin.", "defaultCss": "", "options": [], "preview": { "home": "", "title": "" } }, { "name": "JellyFlix", "author": "prayagprajapati17", "description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.", "defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);", "options": [], "preview": { "home": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true", "title": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TitlePage.png?raw=true" } } ]; console.log(myObj[1].preview); $('#img').append('<img src="'+ myObj[1].preview.title +'"></img><img src="'+ myObj[1].preview.home +'"></img>') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="img"></div>