jquery - 无法在 Reactjs 中使用 Reel 旋转图像

Question

React 相当新，但我正在尝试使用 jQuery reel 将图像列表旋转 360 度。我有一个纯粹的 jQuery 实现工作，但我想将它转移到 Reactjs。

当我尝试data-images在 img 标签中设置属性时，reel 找不到其余的图像。

import React, { Component } from 'react';
import styles from "./main.css";
require('tracking')
require('jquery.reel')

import pic from './pics/cascadion/Cascadio2017 360 turn 06__0000.png'

class MainView extends Component{

    constructor(props){
        super(props);

        this.style = styles.mainView;
        this.tracker = null
    }

    componentDidMount () {
        tracking.ColorTracker.registerColor('red', function(r, g, b) {
            if (r > 175 && g < 90 && b < 90) {
                return true;
            }
            return false;
        });
        this.tracker = new window.tracking.ColorTracker("red")

        window.tracking.track("#img", this.tracker)
        this.tracker.on('track', event => {
            event.data.forEach(function(rect) {
                console.log("Found: " + rect.x + " and " + rect.y)
            })
        })

        $('#img').reel({
            frames: "360",
            images: "./pics/cascadion/Cascadio2017 360 turn 06__####.png",
        })
    }

    render(){
        return(
            <div className="container">
                <div className="row">
                    <div id="demo-container" className={"col justify-content-center " + this.style}>
                        <img 
                            id="img"
                            className="reel" 
                            src={pic} 
                            width="850" 
                            height="600" 
                        />
                    </div>
                </div>
            </div>
            );
        }
    }

export default MainView;

Answer 1

对不起，还是新手，我的路错了。

App
 node_modules
 src
   components
     cascadion
       pics
         cascadion
 .bablerc
 package.json

需要的路径data-images是绝对路径：src/components/cascadion/pics/cascadion/Cascadio2017 360 turn 06__####.png