无法通过jQuery使用JSON中配置的URL呈现图像

Question

我从一个JSON文件中获取了图像链接，并在img标记的img属性中提供了它们，但是在执行时得到了一个错误的404未定义的。

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.json

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>

​