-1

i have a json data like that

{ "ikealogo": "https://xxx.blob.core.windows.net/logo/24536.jpg?v=20120912144845" }

how can i convert it in image view?

Things i have tried but need alternate solution. it works fine in popup window but **i need to convert it for my content script in a specific webpage, when user will hover mouse on a text and should appear this image ** but applying same process is not working at all.

//popup.js

  var image = document.getElementById('img');
  image.src = jsonData.ikea.ikealogo;

//popup.html
 <img id="img" />
APALALA
  • 60
  • 9
  • What is the exact error message, where it is shown, how do you obtain json in your content script, what are the errors/warnings/messages in devtools console (F12 key)? Also add manifest.json. – wOxxOm Oct 28 '15 at 09:40
  • @wOxxOm yes i want to appear this image in a webpage when user will hover mouse on some specific text. i can appear texts but image view is not working. any solution? ` "permissions" : [ "declarativeContent", "webNavigation", "activeTab", "tabs", "https://api.mycompany.com/", "cookies", "*://*/*", "storage" ],` – APALALA Oct 28 '15 at 10:01
  • `"://*/"` is missing the scheme and path; should be `"*://*/*"` or better `""` – wOxxOm Oct 28 '15 at 10:03
  • Possible duplicate of [Cross-domain XMLHttpRequest using background pages](http://stackoverflow.com/questions/7699615/cross-domain-xmlhttprequest-using-background-pages) – wOxxOm Oct 28 '15 at 10:03
  • @wOxxOm no really ! i am not having any trouble with cross domain request sending json data to content script and so on. but having trouble how to convert json data in a image view. – APALALA Oct 28 '15 at 10:17
  • The problem is that the sites forbid image elements to be loaded from urls nonwhitelisted by that site's CSP. The linked duplicate provides the solution. – wOxxOm Oct 28 '15 at 10:20
  • it could be . but it dint really solved my problem. – APALALA Oct 28 '15 at 12:20
  • Well the problem might be caused by something else. Your description is and was insufficient to diagnose it. It's also not clear whether you have tried fetching the image using the method from the linked duplicate. Either provide more details or upload the extension so that I test it live or the question might get closed as `unclear what you're asking` or as `unreproducible`. – wOxxOm Oct 28 '15 at 12:49
  • where can i upload the extension? – APALALA Oct 30 '15 at 15:08
  • Any file hosting site without registration will do I think, for example http://www.tinyupload.com/ – wOxxOm Oct 30 '15 at 15:13

1 Answers1

0

SOLUTION: To appear any image from external server on DOM : I parse data from API response and create div with jquery and append the image data inside it. There's NO need for CROSS DOMAIN COMPLICITY.

var image= data["company"].ikealogo;

 var div=jQuery('<div/>', 
          {
             "class": "divC",
          });
  var i = jQuery('<img />').error(function() 
          {
          this.src = default_image;
          }).attr('src', image)
          .css({ "width":"50px", "height": "50px","margin": "0px 10px 10px 10px"});

 div.append(i)
APALALA
  • 60
  • 9