To set PNG images for the Spine Player in a React application, you can use the rawDataURIs configuration property to embed your PNG images directly in the JavaScript. This method allows you to include the image data as a base64 encoded string. Here's an example of how you can do this:

import React, { useEffect } from 'react';
import { SpinePlayer } from 'spine-web-player';

const SpineComponent = () => {
  useEffect(() => {
    new SpinePlayer("player-container", {
      jsonUrl: "path/to/your/spineboy-pro.json",
      atlasUrl: "path/to/your/spineboy-pma.atlas",
      rawDataURIs: {
        "spineboy-pma.png": "data:image/png;base64,<base64 encoded image data>"
      }
    });
  }, []);

  return <div id="player-container" style={{ width: '100%', height: '100%' }} />;
};

export default SpineComponent;

Make sure to replace "path/to/your/spineboy-pro.json" and "path/to/your/spineboy-pma.atlas" with the actual paths to your JSON and atlas files, and <base64 encoded image data> with the base64 encoded string of your PNG image.

17573207179

As explained here:

The major and minor version for the Spine editor used to export JSON or binary data must always match the Spine Runtimes version. If not, the Spine Runtimes will not be able to read the data. This dependency is very important.

So, please, upgrade your assets to 4.2 and then try again.

To resolve the issue of the Spine player not loading images in your React project, ensure that the version of the Spine player matches the version used to export your Spine assets. The major and minor versions of the runtime and the editor must match, as mentioned in the context. If your assets were exported with a different version, you may encounter loading issues. Additionally, check for any CORS errors or incorrect file extensions, such as using .altas instead of .atlas, which can prevent images from loading. Also, ensure that your React component is correctly set up to initialize the Spine player after the DOM element is available.

17573207179

Hello

I’ve merged the new thread you created into this one since it relates to the same issue.

I’m not entirely sure if you were able to export the assets to version 4.2, but considering you demonstrated that the player is working for you in the plain HTML version, I assume both the player and assets are at 4.2.

From the screenshots you’ve provided, I don’t see any obvious issues with your code, and embedding a Spine player into React works for me.

That said, please keep in mind that while providing screenshots of code is quicker for you, it doesn’t enable us to provide high-quality support, as we can only visually evaluate the code. As I previously suggested, the best way to get higher-level support is to share a project that reproduces your issue. You can attach an archive here or send it to contact@esotericsoftware.com.

I’d really like to help you, but I need to be able to reproduce the issue on my end.