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会进行静态分析，以了解它需要包括哪些静态资产，但是，当您进行诸如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;

如果您使用的是我所述的图像捆绑器，这是正确的方法。

Answer 2

使用绝对路径而不是相对路径

  @Override
    public void onPageFinished(WebView view, final String url) {
        super.onPageFinished(view, url);


        String Js = "here is my Js";


        webView.evaluateJavascript(Js, new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {

                Log.v("Asdasdasdsd", value);
                shimmerFrameLayout.setVisibility(View.GONE);
                shimmerFrameLayout.hideShimmer();

                rvImages.setVisibility(View.VISIBLE);
                relative.setVisibility(View.GONE);
                webView.setVisibility(View.GONE);

                if (!TextUtils.isEmpty(value)) {

                    value = value.replaceAll("^\"|\"$", "");

                    List<String> fixedLenghtList = new ArrayList<>();

                    if (value.contains("||||")) {
                        String[] elements = value.split(Pattern.quote("||||"));

                        if (elements != null && elements.length > 0) {
                            for (int i = 0; i < elements.length; i++) {

                                if (!TextUtils.isEmpty(elements[i].trim())) {
                                    fixedLenghtList.add(elements[i].trim());
                                }
                            }
                        }


                    } else {
                        fixedLenghtList.add(value);
                    }

                    ExtensionImagesAdapter extensionImagesAdapter = new ExtensionImagesAdapter(SharingImagesListActivity.this, fixedLenghtList, url);
                    rvImages.setAdapter(extensionImagesAdapter);
                }

            }
        });

服务尝试查找相对于其路径的图像，但失败

如果要使用相对路径（不好的主意）

使用

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

服务比家庭更深一层

Answer 3

而不是像代码中那样使用require

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

您应直接提供src atrib并将其网址作为网址，并将其用作：

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

Answer 4

谢谢。将“ require”语句移动到外部组件可以解决此问题：

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;

反应：道具-为什么一个可行，但另一个不可行

4 个答案: