Can't use local image as node background in cytoscape.js

Question

I've been unable to use local image as node background in cytoscape.js no matter the syntax.

On styles.json I've tried:

 "selector": "node[ id = '6104' ]",
    "css": {
      "background-image": "image.jpg",

also

"background-image": "url(image.jpg)",

also

"background-image": "data(image.jpg)",

also

"background-image": "url(./image.jpg)",

among others... nothing seems to work. Using a web url for image works fine. Just not local files. Any suggestions? Thanks in advance

Answer 1

This does not answer the question directly, but offer a workaround.

You can convert the images to Base64 code and use the "encodeURI()" function to get it done.

Here is a demo code (click Run code snippet button to see the result):

// [1] Base64 code obtained from PING image
// The image is pixel based, when zoomed-in pixels are bigger 
// The 'base64' string was converted from an original 'ping' image file
// Use online services to get your images conversion
const ap_base64 = `iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=`;
const ap_base64Url = encodeURI("data:image/ping;base64," + ap_base64);
const ap_style = {
    "background-color": "#bbbbbb",
    "background-image": ap_base64Url,
    label: "PING_Base64",
    width: 60,
    height: 60,
    opacity: 1.0
  };

// [1] Base64 code obtained from SVG graphic
// The image is scalable when zooming, the graphic is always sharp
const bolt_svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="100" height="200" title="bolt">
  <path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z" />
</svg>`;
const svg_base64Url = encodeURI("data:image/svg+xml;utf-8," + bolt_svg);
const svg_style = {
    "background-color": "#bbbbbb",
    "background-image": svg_base64Url,
    label: "SVG_Base64",
    width: 160,
    height: 160,
    opacity: 1.0
  };

var cy = cytoscape({
  container: document.getElementById("cy"),

  elements: {
    nodes: [

      {
        data: { id: "AB", name: "SVG Icon" },
        position: { x: 80, y: 350 },
        classes: "svg_class"
      },

      {
        data: { id: "DE", name: "Dreamy eyes" },
        position: { x: 300, y: 250 },
        classes: "ap_class"
      },
    ],

    edges: [
      { data: { source: "AB", target: "DE", label: "edge1" } },
    ]
  },

  style: [
    {
      selector: "node.ap_class",
      style: ap_style
    },
    {
      selector: "node.svg_class",
      style: svg_style
    },
    {
      selector: "edge",
      style: {
        label: "data(label)",
        width: 3,
        "line-color": "#cc00cc",
        //"target-arrow-color": "#000099",
        "curve-style": "bezier",
        "target-arrow-shape": "triangle",
        //"target-arrow-fill": "#990000",
        "arrow-scale": 1
      }
    },
    {
      selector: ".highlight",
      css: {
        "background-color": "yellow"
      }
    },
    
  ],
  layout: {
    name: "preset"
  }
});

//Left-mouseBtn click to select
cy.on("tap", "node", function (e) {
  var ele = e.target;
  ele.addClass("highlight");
});
// Right-mouseBtn click to unselect
cy.on("cxttap", "node", function (e) {
  var ele = e.target;
  ele.removeClass("highlight");
});

#cy {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 5px;
  left: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>

<div>
<span>Cytoscape nodes with image</span>
</div><br/>
<div id="cy"></div>