Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Martin Coutts
Martin Coutts
18,154 Points

Importing local image file path in React from JSON file

Having an issue with importing a file path to a local image file in React.

I am mapping through a JSON file to dynamically create project cards, each with a description, title, link to page etc, as well as this I want to include a thumbnail image, my JSON looks like this at the moment

[{
  "name": "project 1",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus sed turpis tincidunt id. Vitae purus faucibus ornare suspendisse sed nisi. Enim lobortis scelerisque fermentum dui faucibus in. Semper auctor neque vitae tempus quam pellentesque. Integer vitae justo eget magna. Purus viverra accumsan in nisl nisi scelerisque. Ut pharetra sit amet aliquam id diam maecenas. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Sapien et ligula ullamcorper malesuada proin. Velit laoreet id donec ultrices. Tellus elementum sagittis vitae et. Velit laoreet id donec ultrices tincidunt arcu non. Dui vivamus arcu felis bibendum ut tristique et egestas. Tristique et egestas quis ipsum suspendisse ultrices gravida. Faucibus turpis in eu mi bibendum neque egestas congue. Vestibulum rhoncus est pellentesque elit ullamcorper. Orci nulla pellentesque dignissim enim sit. Bibendum at varius vel pharetra.",
  "link": "www.testlink.com",
  "thumbnailSrc": "../assets/images/project-images/myScoreboardThumbnail.png"
}]

then in my project card component

import React, { Component } from "react";
import { Image } from "react-bootstrap";

class ProjectCard extends Component {

  render() {
    return (
      <div>
        <h3>{this.props.projectData.name}</h3>
        <hr />
        <Image src={require(this.props.projectData.thumbnailSrc)} fluid />
        <p>{this.props.projectData.description}</p>
      </div>
    );
  }
}

export default ProjectCard;

However I am getting this error × ←→1 of 2 errors on the page Error: Cannot find module '../assets/images/project-images/myScoreboardThumbnail.png'

When I link directly to the image this works fine however this defeats the purpose of dynamically creating objects as would need to individually make components. Sure there is a simple fix but it's stumped me.

Thanks for the help

Seth Kroger
Seth Kroger
56,407 Points

What I'm not understanding here is what you are hoping to get out of using require to load the image instead of just using the link (which is dynamic, btw). Otherwise you should just use the link, i.e., src={this.props.projectData.thumbnailSrc}.

1 Answer

I am having this same problem.. does anyone know the answer to this question?