No photo in slider when open stories ?

[dash7ou]

this is my code //

import React from 'react'; import Zuck from "zuck.js"

import './App.css';

class App extends React.Component { constructor(props) { super(props);

// React ^16.3
// this.storiesElement = React.createRef();

this.storiesElement = null;
this.storiesApi = null;

this.state = {
  stories: [
    Zuck.buildTimelineItem(
      "ramon",
      "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/1.jpg",
      "Ramon",
      "https://ramon.codes",
      Date.now(),
      [
        ["ramon-1", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg", '', false, false, Date.now()],
        ["ramon-2", "video", 0, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.mp4", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.jpg", '', false, false, Date.now()],
        ["ramon-3", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png", 'https://ramon.codes', 'Visit my Portfolio', false, Date.now()]
      ]
    ),
    Zuck.buildTimelineItem(
      "gorillaz",
      "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/2.jpg",
      "Gorillaz",
      "",
      Date.now(),
      [
        ["gorillaz-1", "video", 0, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.mp4", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.jpg", '', false, false, Date.now()],
        ["gorillaz-2", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg", '', false, false, Date.now()],
      ]
    ),
    Zuck.buildTimelineItem(
      "ladygaga",
      "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/3.jpg",
      "Lady Gaga",
      "",
      Date.now(),
      [
        ["ladygaga-1", "photo", 5, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg", '', false, false, Date.now()],
        ["ladygaga-2", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg", 'http://ladygaga.com', false, false, Date.now()],
      ]
    ),
    Zuck.buildTimelineItem(
      "starboy",
      "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/4.jpg",
      "The Weeknd",
      "",
      Date.now(),
      [
        ["starboy-1", "photo", 5, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg", '', false, false, Date.now()]
      ]
    ),
    Zuck.buildTimelineItem(
      "riversquomo",
      "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/5.jpg",
      "Rivers Cuomo",
      "",
      Date.now(),
      [
        ["riverscuomo", "photo", 10, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg", '', false, false, Date.now()]
      ]
    )
  ]
}

}

componentDidMount() { this.storiesApi = new Zuck(this.storiesElement, { paginationArrows: false, skin: 'snapgram', // container class avatars: true, // shows user photo instead of last story item preview list: false, // displays a timeline instead of carousel openEffect: true, // enables effect when opening story cubeEffect: false, // enables the 3d cube effect when sliding story autoFullScreen: false, // enables fullscreen on mobile browsers backButton: true, // adds a back button to close the story viewer backNative: false, // uses window history to enable back button on browsers/android previousTap: true, // use 1/3 of the screen to navigate to previous item when tap the story localStorage: true, // set true to save "seen" position. Element must have a id to save properly. reactive: true, // set true if you use frameworks like React to control the timeline (see react.sample.html) rtl: false, callbacks: { onDataUpdate: function (currentState, callback) { this.setState(state => { state.stories = currentState;

        return state;
      }, () => {
        callback();
      });
    }.bind(this)
  }
});

}

render() { const timelineItems = []

this.state.stories.forEach((story, storyId) => {
  const storyItems = [];

  story.items.forEach((storyItem) => {
    storyItems.push(
      <li key={storyItem.id} data-id={storyItem.id} data-time={storyItem.time} className={(storyItem.seen ? 'seen' : '')}>
        <a href={storyItem.src} data-type={storyItem.type} data-length={storyItem.length} data-link={storyItem.link} data-linkText={storyItem.linkText}>
          <img src={storyItem.preview} />
        </a>
      </li>
    );
  });

  let arrayFunc = story.seen ? 'push' : 'unshift';
  timelineItems[arrayFunc](
    <div className={(story.seen ? 'story seen' : 'story')} key={storyId} data-id={storyId} data-last-updated={story.lastUpdated} data-photo={story.photo}>
      <a className="item-link" href={story.link}>
        <span className="item-preview">
          <img src={story.photo} />
        </span>
        <span className="info" itemProp="author" itemScope="" itemType="http://schema.org/Person">
          <strong className="name" itemProp="name">{story.name}</strong>
          <span className="time">{story.lastUpdated}</span>
        </span>
      </a>

      <ul className="items">
        {storyItems}
      </ul>
    </div>
  );
});

return (
  <div>
    <div ref={node => this.storiesElement = node} id="stories-react" className="storiesWrapper">
      {timelineItems}
    </div>
  </div>
);

} } export default App;

[alexanderlhk]

Recording of issue: http://team.cudy.co/files/5kq973y5xjgq8xixnr13ak8mqa/public?h=H98FndNDfj2ARg8Xi0NUEI4DAvBixcWtIjSltlhjzjs

[rajasimon]

Is this resolved? I'm having the same issue.

[Sohomcn]

Is the issue fixed? any solution?