10

i'm passing the following as props.

const people=['Eliana','Stefania','Ahmed']

{
  people.map(function(name, index){
    return <Person item={index} name={name}/>;
  })
}


import Eliana from '../assets/imgs/people/eliana.png'
import Stefania from '../assets/imgs/people/stefania.png'
import Ahmed from '../assets/imgs/people/ahmed.png'

export default class Person extends React.Component {
  render() {
    return (
      <div>
        <img src={this.props.name} alt=''/>
	    <li key={this.props.item}>{this.props.name}</li>
	  </div>
    );
  }
}

what i'm doing here is using the above strings in the array to pass to a component and then generate images from that component by using the corresponding path, however when i pass the props, they display as strings, like Eliana would display as is in the img src?

how do i get corresponding paths? some kind of string conversion probably? i bet this is an easy one!

Improve this question
3
  • Wrapping an li in a div is invalid HTML. The li should be a direct child of a ul or ol. Commented Sep 26, 2017 at 5:08
  • that's not the question. Also, i was just testing something, dont even need a li there. Commented Sep 26, 2017 at 21:00
  • I know, that's why I left it as a comment :) Just trying to be helpful. Commented Sep 26, 2017 at 21:30

2 Answers 2

Reset to default
25

An easy fix for what you're asking about

<img src={require(this.props.name)} alt=''/>

But this is implying that you have the full path. What you currently have doesn't look like will work. In one way or another, each one has to end up with a path name, like this, when React interprets your code:

<img src={require('../assets/imgs/people/ahmed.png')} alt=''/>

A simple fix is to add the path as a string before your this.props.name. It's standardized so all you have to do is add the name in, like so:

<img src={require(`../assets/imgs/people/${this.props.name.toLowerCase()}.png`)}/>

Be sure to document this though. You definitely want to document this.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

× Error: Cannot find module "." webpackMissingModule C:/development/hybrid/src/components/person.js:23 yes its a rel path which works if i pass it directly to an img src, i'm not too sure how would i pass abs path here. from ./ and onwards, the root dir would be localhost right?
The default behavior is relative path, not absolute path, if that was your question. Because your image paths are so well standardized, you can always just string interpolate. Let me update my answer.
thanks that helped! voted up, might take a while to update :)
another question if you have a min, why did this.props.name turned out as a name? i mean while this solution worked, i'd like to know how could we transform / parse that string to the value of imported file?
You're not using those 3 imported images at all, if that's your question. I'd have to show you this in the form of another question if you want a full explanation, but the basic rundown is that you'd have to put those images in your parent and make an array of those images, as opposed to an array of string with just their names.
|
3

You could just use concatenate the entire URL besides the name, then concatenate the name prop in it's place.

<img src={require('../assets/imgs/people/' + this.props.name + '.png')}
Improve this answer

8 Comments

tried that, throws a webpack error, anything i'm trying to do with 'require' syntax throws a webpack error. i have set up a basic CRNA
No, the only reason Gage's solution throws an error is because the image file names are all lower case, while your this.props.name string are upper case.
@Andrew good catch! You can either lowercase it inside of the people array, or in the path string itself via this.props.name.toLowerCase()
@GageHendyYaBoy Yep. Saw the same possible issue in my solution as well. Ours are basically the same. I just used string interpolation and you used concatenation.
yes, thanks! that helped!
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.