Question

这是React的新手，但是我正在尝试使用jQuery卷轴将图像列表旋转360度。我有一个纯粹的jQuery实现，但是我想将其转移到Reactjs。

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

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

无法在React.js中使用Reel旋转图像

1 个答案: