Is there a way to use local images?

[clevernyyyy]

I'm having trouble trying to use local images. Is that feasible?

This works in the img tag, but not in the events tag.

import React, { Component } from 'react';
import Timeline from 'react-image-timeline';
import thePicture from '../images/thePicture.jpg';
require('react-image-timeline/dist/timeline.css');

class Test extends Component {
  render() {
    const events = [{
      date: new Date(2013, 9, 27),
      text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
      title: "The Picture",
      imageUrl: '../images/thePicture.jpg'
    }]

    return (
      <div className=''>
        OurStory
        <img src={thePicture} />              {/*  Renders Picture  */}
        <Timeline events={events} />          {/*  Does Not Render Picture  */}
      </div>
    );
  }
}

export default Test;

[aaron9000]

Hi @clevernyyyy - you may need a fully qualified path for the image url. Have you tried that?

Additionally, are you using CreateReactApp?

[clevernyyyy]

Yes I am, which I know auto hashes names.

[aaron9000]

Have you tried passing thePicture?

[clevernyyyy]

To what? This isn't proper formatting.

    const events = [{
      date: new Date(2013, 9, 27),
      text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
      title: "The Picture",
      imageUrl: thePicture
    }]

[aaron9000]

Check out this file: https://github.com/aaron9000/react-image-timeline/blob/master/src/data.js

When served via CRA, this pattern seems to work in the example project.

Do you see errors in the browser by chance? I don't see anything wrong with the below:

const events = [{
      date: new Date(2013, 9, 27),
      text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
      title: "The Picture",
      imageUrl: thePicture
    }]

[joepagan]

I can confirm this works:

import svg from './logo.svg';
const events = [
  {
    date: new Date(2013, 9, 27),
    text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
    title: "Cairo, Egypt",
    imageUrl: svg,
  },
];

[aaron9000]

Woot! Thank you, Joe!

Gonna close this issue.

[joepagan]

No problem @aaron9000 thanks for your work dude