Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Martin Coutts
Martin Coutts
18,154 Points
Posted by 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,413 Points
Seth Kroger
Seth Kroger
56,413 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

Karla Gallegos
seal-mask
.a{fill-rule:evenodd;}techdegree
Karla Gallegos
Front End Web Development Techdegree Student 5,357 Points
Karla Gallegos
.a{fill-rule:evenodd;}techdegree
Karla Gallegos
Front End Web Development Techdegree Student 5,357 Points

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