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('');

and HTML block used to show the images:

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

user_14425124 · Answer

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('')

});

Unable to render image using URL configured in JSON via jQuery

1 Answers