javascript - react : Props - Why does one work, 但另一个没有

Question

我有以下问题:

当我直接在组件中输入图像的 URL 时，它会工作并显示:

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;

但是当我从外部组件通过“props”发送图像 url 时它不起作用，尽管它是完全相同的字符串。我收到“错误:找不到模块‘../../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;

有人可以给我提示吗？

谢谢问候

Answer 1

这可能是(您必须确认)您正在使用 webpack 和图像加载器来加载内容。 Webpack 将进行静态分析以了解它需要包含哪些静态 Assets ，但是，当您进行动态需求(这意味着需要一个变量)时，如 require(this.props.image) webpack 有在打包时不知道您要加载什么。解决方案是始终加载图像的完整路径，然后将其传递给 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;

如果您使用任何像我描述的那样工作的图像打包器，这是正确的做法。