CODEWITHSUNDEEP
javascriptreactjs
MarkusJackson
MarkusJackson

Reputation: 265

React: Props - Why does one work, but another not

I have the following Problem:

When I enter the URL to my image directly in the component, it works and gets displayed:

import React, { Component } from 'react';
import './Service.css';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

But when I send the image url through the "props" from the outer component it does not work, although ist the exact same string. I get "Error: Cannot find module '../../images/project_management.jpg'"

import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" img="../../images/project_management.jpg" />
        </div>
      </div>
    );
  }
}
export default Home;

import React, { Component } from 'react';
import './Service.css';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={require(this.props.img)} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

Can anybody give me a hint?

Thanks Regards

Upvotes: 1

Views: 90

Answers (4)

MarkusJackson
MarkusJackson

Reputation: 265

thank you. Moving the "require"-Statement to the outer component solved the problem:

import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" img={require("../images/project_management.jpg")} />
          <Service serviceName="Software Engineer" img={require("../images/project_management3.jpg")} />
          <Service serviceName="Web Developer" img={require("../images/web_development.jpg")} />
        </div>
        <div className="inner-container">
          <Service serviceName="Requirements Enigneer" img={require("../images/requirements_engineering.jpg")} />
          <Service serviceName="Quality Manager" img={require("../images/quality_management.jpg")} />
          <Service serviceName="Trainer" img={require("../images/trainer.jpg")} />
        </div>
      </div>
    );
  }
}
export default Home;

Upvotes: 0

Danielo515
Danielo515

Reputation: 7061

This is probably (you have to confirm this) you are using webpack and an image loader to load the content. Webpack will make a static analysis to understand which static assets it needs to include, however, when you make a dynamic require (this means, require a variable) like require(this.props.image) webpack has no idea at bunndle time of what you want to load. The solution is to always load the full path to the image, then pass that on props:

import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';

class Home extends Component {
  render() {
    return (
      <div className="outer-container">
        <div className="inner-container">
          <Service serviceName="Project Manager" img={require("../../images/project_management.jpg")} />
        </div>
      </div>
    );
  }
}
export default Home;

import React, { Component } from 'react';
import './Service.css';

class Service extends Component {
  render() {
    return (
      <div>
        <h2 className="logo">{this.props.serviceName}</h2>
        <img src={this.props.img} width="150" alt="Smiley face" />
      </div>
    );
  }
}
export default Service;

This is the correct way of doing it if you are using any image bundler that works like I described.

Upvotes: 3

Jatin Parmar
Jatin Parmar

Reputation: 2900

instead of using require like one in your code

<img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />

you should provide and url directly to src atrib and use it as:

<img src={this.props.img} width="150" alt="Smiley face" />

Upvotes: 0

kooskoos
kooskoos

Reputation: 4859

Use absolute path to image instead of relative

<Service serviceName="Project Manager" img={absoltePathToImage} />

Service tries to find the image relative to it's path and fails

If you want to use relative paths(bad idea)

Use

<Service serviceName="Project Manager" img="../../../images/project_management.jpg" />

As service is one layer deeper to Home

Upvotes: 0

Related Questions