reactjs中的图像导入问题

Question

我有一个组件，我在其中传递了图像 url，但出现编译器错误。

Service.js

import React from 'react';

const Service = (props) => {
  return (
    <div className="col-sm-6 col-md-6 col-lg-6 col-6">
      <div className="service">
        <img src={require(props.URL)} alt="pencil_logo" />
        <h4>{props.Title}</h4>
        <p>{props.Description}</p>
      </div>
    </div>
  );
};

export default Service;

关于.js

const About = (props) => {
  console.log(props);

  let services = null;

  services = props.Services.map((x, index) => {
    return <Service {...x} key={index} />;
  });
  return(
    <div>{services}</div>
  );
};
export default About;

props.Services 有以下值

{
  "Services": [
    {
      "Description": "testdata",
      "Title": "testdata",
      "URL": "../../../assets/images/site/pencil_tip.svg"
    },
    {
      "Description": "testdata2",
      "Title": "testdata2",
      "URL": "../../../assets/images/site/pencil_tip2.svg"
    },
    {
      "Description": "testdata3",
      "Title": "testdata3",
      "URL": "../../../assets/images/site/pencil_tip3.svg"
    }
  ]
}

当我运行这个应用程序时，我得到了这个错误

未捕获的错误：找不到模块 '../../../assets/images/site/pencil_tip.svg'

但是当我这样使用时，它工作得非常好。

import pencil from'../../../assets/images/site/pencil_tip.svg';
...
<img src={pencil} alt="pencil_logo" />

为什么它没有动态地找到图像以及如何解决这个问题以及为什么它在硬编码的情况下找到图像？

更新 #1：

我在构建时在终端中收到此警告

Compiled with warning
../xx/xx/Service.js
Critical dependency: the request of a dependency is an expression

Answer 1

如果您想使用这种方式，则不能在 url 中使用 ..。您必须提供该图像的完整路径。当您在导入中使用它时，它会将其转换为完美的 url。但是当你将它作为一个字符串传递时，它不会被转换成一个完美的 url。完美的网址意味着。假设我在asset/img/img.jpg 中有一个图像，所以当您使用.. 导入它时，它会将路径转换为完整路径。但是当您传递一个字符串时，它会以相同的方式传递。所以它找不到它。

Answer 2

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const images = {
    "Services": [
     {
         "Description": "testdata",
          "Title": "testdata",
          "URL": './Assets/naruto.jpg'
     },
     {
          "Description": "testdata2",
          "Title": "testdata2",
          "URL": './Assets/naruto.jpg'
     },
     {
         "Description": "testdata3",
         "Title": "testdata3",
         "URL": './Assets/naruto.jpg'
     }
  ]
}
return (
   <div id="container">
       {images.Services.map( image => <img src={require(`${image.URL}`)} style={{width: '20%'}}/>)}
   </div>
);
  }

   export default App;

这是我的代码，它有效

Answer 3

无论如何，我找到了答案。似乎问题出在require 本身。我们不能像 <img src={require(props.URL)} alt="pencil_logo" /> 这样动态传递整个 url。

require 需要某些部分是动态的。所以使用

<img src={require('../../../assets/' + props.URL)} alt="pencil_logo"/> 解决了我的问题

Answer 4

您不能像这样传递图像 url，因为编译器不会看到它需要在构建期间包含它们。首选方法是将图像导入某个数组或对象中，然后稍后通过键引用它们。比如：

Images.js

import pencil from'../../../assets/images/site/pencil_tip.svg';
import pencil2 from'../../../assets/images/site/pencil_tip2.svg';
import pencil3 from'../../../assets/images/site/pencil_tip3.svg';

const images = {pencil, pencil2, pencil3};
export const getPencilTip(key) => {
  return images[key];
}

然后假设你的服务返回

{
  "Services": [
    {
      "Description": "testdata",
      "Title": "testdata",
      "ImageKey": "pencil_tip"
    },
    {
      "Description": "testdata2",
      "Title": "testdata2",
      "ImageKey": "pencil_tip2"
    },
    {
      "Description": "testdata3",
      "Title": "testdata3",
      "ImageKey": "pencil_tip3"
    }
  ]
}

你可以这样使用它

import React from 'react';
import {getPencilTip} from './Images';

const Service = (props) => {
  return (
    <div className="col-sm-6 col-md-6 col-lg-6 col-6">
      <div className="service">
        <img src={getPencilTip(props.ImageKey)} alt="pencil_logo" />
        <h4>{props.Title}</h4>
        <p>{props.Description}</p>
      </div>
    </div>
  );
};