虽然 Cytoscape.js 支持节点中的背景图像，但我无法显示没有 CORS(跨源资源共享) header 的图像。 Chrome 抛出以下错误。
Access to image at 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
from origin 'https://null.jsbin.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是我正在尝试访问的图像 - 
但是，如果我尝试使用 d3.js 在节点中显示与背景相同的图像，则会显示该图像。
Cytoscape.js
var cy;
window.addEventListener('DOMContentLoaded', function() {
cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'height': 60,
'width': 60,
'background-fit': 'cover',
'border-color': '#000',
'border-width': 1,
'label': 'data(label)'
})
.selector('edge')
.css({
'width': 2,
'line-color': '#ffaaaa',
'target-arrow-color': '#ffaaaa',
'curve-style': 'bezier',
})
.selector('#puppy')
.css({
'background-image': 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
})
.selector('#cat')
.css({
'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
}),
elements: {
nodes: [{
data: {
id: 'cat',
label: 'Images are supported'
}
},
{
data: {
id: 'puppy',
label: 'Desired image not being shown'
}
},
],
edges: [{
data: {
source: 'cat',
target: 'puppy',
label: 'puppy'
}
}]
},
layout: {
name: 'circle'
}
}); // cy init
});body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 70%;
width: 100%;
position: absolute;
left: 100;
top: 100;
}<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2018 by maxkfranz (http://jsbin.com/teworah/3/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Images</title>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>d3.js
var config = {
"avatar_size": 100
}
var body = d3.select("body");
var svg = body.append("svg")
.attr("width", 500)
.attr("height", 500);
var defs = svg.append('svg:defs');
data = [{
posx: 100,
posy: 100,
img: "https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg",
}];
svg.append('clipPath')
.attr('id', 'clipObj')
.append('circle')
.attr('cx', config.avatar_size)
.attr('cy', config.avatar_size)
.attr('r', config.avatar_size);
data.forEach(function(d, i) {
svg.append('image')
.attr('xlink:href', d.img)
.attr('width', config.avatar_size)
.attr('height', config.avatar_size)
.attr('transform', 'translate(' + parseInt(d.posx + config.avatar_size / 2) + ',' + parseInt(d.posy + config.avatar_size / 2) + ')')
.attr('clip-path', 'url(#clipObj)');
})<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>最佳答案
在您的具体示例中，如果您将 crossOrigin 设置为 anonymous 它不起作用，但如果您不设置它(即它是 null )，然后就可以了。
默认情况下，Cytoscape.js 将图像的 crossOrigin 字段设置为 anonymous see the doc 。无法将其设置为 null。
但如果您仍然需要，您可以使用源代码:将 crossOrigin 字段设置为 null here将显示该特定图像。
在此JsFiddle ，如果将 origin 设置为 null 它可以工作，但将其设置为 anonymous 则不起作用。
P.S:如果需要，您还可以在开发人员工具的“网络”选项卡中运行代码片段并分析响应和请求 header 。在 Firefox 中，您可以编辑 header 、重新发送请求，并查看它如何影响响应。
关于d3.js - 为什么 Cytoscape.js 会阻止跨源图像请求，而 d3.js 不会阻止？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54370907/