Unable to render image using URL configured in JSON via jQuery

Question

I had fetched image Links from a JSON file and provided them in src attribute of img tag in HTML but get an error 404 undefined on execution.

JSON File

[
  {
    "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"
    }
  }
]

My JSON file link https://raw.githubusercontent.com/prayag17/jellyfin-plugin-skin-manager/cssEditor/skins-3.0.json

jQuery Code Snippet to set URL in image(used inside HTML file):

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

and HTML block used to show the images:

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

Please help me know what I am missing in code. Thanks in advance

Answer 1

Try it & Look at the code in editor.

You were trying to access direct from array, the image url you were looking is in the second element of array.

 $(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>