节点背景图像不起作用（仅来自Flickr显示的图像）

Question

I am having trouble getting the background-image node property to work.

I am simply using the "Images & breadthfirst layout" demo as a test example (located at https://gist.github.com/maxkfranz/aedff159b0df05ccfaa5 ), but I cannot even get that to work.

In the demo, within the 'code.js' file, if I change any image path to anything other than staticflickr, the image will not display. For instance:

If I change

.selector('#bird')
  .css({
    'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
  })

to

.selector('#bird')
  .css({
    'background-image': 'http://astromatrix.org/Content/Images/Objects/Bird.jpg'
  })

The image shows up blank grey in the graph (as shown in the attached image).

I have tried local files, multiple other images hosted on different sites, and the only images I can get to work are from flickr.

Am I completely missing something?

Thanks in advance

Blank image for bird when I change the image URL from flickr image

Answer 1

Use images that you own on your own server. You can't use an image if the server doesn't send back the proper headers.

Make sure to refer to the log in the debug console :

Access to Image at 'http://astromatrix.org/Content/Images/Objects/Bird.jpg' from origin 'http://astromatrix.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.