CODEWITHSUNDEEP
javascripthtmljqueryjson
Prayag Prajapati
Prayag Prajapati

Reputation: 41

Unable to render image using URL configured in JSON via jQuery

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

Upvotes: 2

Views: 308

Answers (1)

Rajen Trivedi
Rajen Trivedi

Reputation: 1302

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>

Upvotes: 1

Related Questions