1

I am building a simple react portfolio app. I have the info for my portfolio items stored in a JSON file.

When I attempt to use the image code for the portfolio item, it does not return the correct path. Instead it returns "[object Module]" where the path should be.

Code:

import React, { Component } from 'react';

export default class WorkItemFocus extends Component {

...

render() {
    if (this.props.activeItemId === '') {
        return (
            <div className="text-center">
                <p>Please select an item below to view more details.</p>
            </div>
        )
    } else {
        const { name, description, tags, img_code } = this.props.activeItem;
        return (
            ...
            <img 
              src={require(`../assets/img/${img_code}`)}
              alt={name}
            />
            ...
        )
    }
}
}

Screen shot: enter image description here

I have looked online and mostly it says I am not using webpack. My package-lock.json file says it is installed under react-scripts.

I did this just two months ago for someone else and did not encounter this problem. Is there something I am missing?

user4889134
  • 111
  • 2
  • 16

1 Answers1

0

Found the answer in this post: Webpack file-loader outputs [object Module]

Needed to add .default to the code.

<img 
    src={require(`../assets/img/${img_code}`).default}
    alt={name}
/>

(I hope I am not the only one out there that posts questions, finds the answer directly after posting and then feels dumb for an hour or two)

user4889134
  • 111
  • 2
  • 16