Html 如何在react中显示阵列中的图像和背景图像

我正在学习如何反应。我试图显示一个数组中的图像和背景图像，但它不起作用

 imgIcon:require+"images/system_analysis.png",

我得到下面的输出

为了形象

<img src="images/system_analysis.png" alt="">

我也尝试了下面的代码，但它显示了一个错误

 <img src={require(props.imgIcon)} alt="" />

注意：我有100多个图像，每个图像都无法手动导入

我在这里分享我的代码

Main.js

import React from 'react';

const OurService = (props) => {
  return (
   <img src={props.imgIcon} alt="" />
      );
}

const OurProducts = (props) => {
  return (
  <div className="proWrapper" style={{backgroundImage: "url("+ props.bg_image + ")"}}></div> 
      );
}
export {OurService,OurProducts} 

import React from 'react';
import {OurService,OurProducts}  from './Main'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';


const AService = () => {
  const serviceArray=[
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    }
  ]
  const serviceFor=serviceArray.map((storeServiceArray, i) => {
   return   <OurService key={i} imgIcon={serviceArray[i].imgIcon}  />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Services</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {serviceFor}
          </div>
    </div>
    </div>

      );
}

const AProducts = () => {
  const productsArray=[
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    }
  ]
  const productsFor=productsArray.map((storeProductsArray, i) => {
return   <OurProducts key={i} bg_image={productsArray[i].bg_image} />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Products</h2>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {productsFor}
          </div>
    </div>
    </div>

      );
}

 export {AService, AProducts}

import React from 'react';
import ReactDOM from 'react-dom';
import {AService, AProducts} from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<AService />,document.getElementById('a-services'));
ReactDOM.render(<AProducts />,document.getElementById('a-products'));

serviceWorker.unregister();

从“React”导入React；
constourservice=（道具）=>{
返回(
);
}
const OurProducts=（道具）=>{
返回(
);
}
出口{我们的服务，我们的产品}

App.js

import React from 'react';

const OurService = (props) => {
  return (
   <img src={props.imgIcon} alt="" />
      );
}

const OurProducts = (props) => {
  return (
  <div className="proWrapper" style={{backgroundImage: "url("+ props.bg_image + ")"}}></div> 
      );
}
export {OurService,OurProducts} 

import React from 'react';
import {OurService,OurProducts}  from './Main'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';


const AService = () => {
  const serviceArray=[
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    }
  ]
  const serviceFor=serviceArray.map((storeServiceArray, i) => {
   return   <OurService key={i} imgIcon={serviceArray[i].imgIcon}  />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Services</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {serviceFor}
          </div>
    </div>
    </div>

      );
}

const AProducts = () => {
  const productsArray=[
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    }
  ]
  const productsFor=productsArray.map((storeProductsArray, i) => {
return   <OurProducts key={i} bg_image={productsArray[i].bg_image} />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Products</h2>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {productsFor}
          </div>
    </div>
    </div>

      );
}

 export {AService, AProducts}

import React from 'react';
import ReactDOM from 'react-dom';
import {AService, AProducts} from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<AService />,document.getElementById('a-services'));
ReactDOM.render(<AProducts />,document.getElementById('a-products'));

serviceWorker.unregister();

从“React”导入React；
从“/Main”导入{OurService，OurProducts}
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“/App.css”；
常量AService=（）=>{
常量服务数组=[
{
imgIcon:“/images/system\u analysis.png”
},
{
imgIcon:“/images/system\u analysis.png”
},
{
imgIcon:“/images/system\u analysis.png”
},
{
imgIcon:“/images/system\u analysis.png”
}
]
const serviceFor=serviceArray.map（（storeServiceArray，i）=>{
返回
})
返回(
我们的服务Lorem Ipsum只是印刷和排版行业的虚拟文本

{serviceFor}
);
}
常量A产品=（）=>{
常数生产线=[
{
bg_image:“images/system_analysis.png”
},
{
bg_image:“images/system_analysis.png”
},
{
bg_image:“images/system_analysis.png”
}
]
const products for=productsArray.map（（storeProductsArray，i）=>{
返回
})
返回(
我们的产品
Lorem Ipsum只是印刷和排版行业的虚拟文本

{productsFor}
);
}
导出{AService，AProducts}

Index.js

import React from 'react';

const OurService = (props) => {
  return (
   <img src={props.imgIcon} alt="" />
      );
}

const OurProducts = (props) => {
  return (
  <div className="proWrapper" style={{backgroundImage: "url("+ props.bg_image + ")"}}></div> 
      );
}
export {OurService,OurProducts} 

import React from 'react';
import {OurService,OurProducts}  from './Main'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';


const AService = () => {
  const serviceArray=[
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    }
  ]
  const serviceFor=serviceArray.map((storeServiceArray, i) => {
   return   <OurService key={i} imgIcon={serviceArray[i].imgIcon}  />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Services</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {serviceFor}
          </div>
    </div>
    </div>

      );
}

const AProducts = () => {
  const productsArray=[
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    }
  ]
  const productsFor=productsArray.map((storeProductsArray, i) => {
return   <OurProducts key={i} bg_image={productsArray[i].bg_image} />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Products</h2>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {productsFor}
          </div>
    </div>
    </div>

      );
}

 export {AService, AProducts}

import React from 'react';
import ReactDOM from 'react-dom';
import {AService, AProducts} from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<AService />,document.getElementById('a-services'));
ReactDOM.render(<AProducts />,document.getElementById('a-products'));

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入{AService，AProducts}；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render（，document.getElementById（'a-services'））；
ReactDOM.render（，document.getElementById（'a-products'））；
serviceWorker.unregister（）；

对于动态路径，必须使用模板字符串

因此，不要这样做，

这样做

import React from 'react';

const OurService = (props) => {
  return (
   <img src={props.imgIcon} alt="" />
      );
}

const OurProducts = (props) => {
  return (
  <div className="proWrapper" style={{backgroundImage: "url("+ props.bg_image + ")"}}></div> 
      );
}
export {OurService,OurProducts} 

import React from 'react';
import {OurService,OurProducts}  from './Main'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';


const AService = () => {
  const serviceArray=[
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    },
    {
      imgIcon:"/images/system_analysis.png"
    }
  ]
  const serviceFor=serviceArray.map((storeServiceArray, i) => {
   return   <OurService key={i} imgIcon={serviceArray[i].imgIcon}  />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Services</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {serviceFor}
          </div>
    </div>
    </div>

      );
}

const AProducts = () => {
  const productsArray=[
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    },
    {
      bg_image:"images/system_analysis.png"
    }
  ]
  const productsFor=productsArray.map((storeProductsArray, i) => {
return   <OurProducts key={i} bg_image={productsArray[i].bg_image} />
  })

  return (
    <div className="container">
      <div className="equalPadding">
        <div className="section-title text-center"><h2>Our Products</h2>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
          <div className="row">
          {productsFor}
          </div>
    </div>
    </div>

      );
}

 export {AService, AProducts}

import React from 'react';
import ReactDOM from 'react-dom';
import {AService, AProducts} from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<AService />,document.getElementById('a-services'));
ReactDOM.render(<AProducts />,document.getElementById('a-products'));

serviceWorker.unregister();

编辑

此外，请确保提供正确的路径。尝试在图像路径中添加点

。像这样

/images/system\u analysis.png

代码的工作副本如下：

看一看

如果使用webpack，您可以使用导入图像文件的整个文件夹（

/myImageFolder

）以匹配正则表达式（

/\（png | jpe？g | svg）$/

），然后使用react组件中的JSX呈现它们

import React from 'react';

function Images() {
  const images = importAll(require.context('./myImageFolder', false, /\.(png|jpe?g|svg)$/))

  return (
    <>
      {images.map(image => <img src={image} alt="" /> )}
    </>
  );
}

export default Images;


function importAll(r) {
  return r.keys().map(r);
}

从“React”导入React；
函数图像（）{
const images=importAll（require.context（'./myImageFolder'，false，/\（png | jpe？g | svg）$/）
返回(
{images.map（image=>）}
);
}
导出默认图像；
函数输入（r）{
返回r.keys（）.map（r）；
}

@ksav，谢谢你的链接，我检查了一下，但问题是，我有100多张图像，每张图像都无法导入。请用上述信息更新你的问题。@ksav，是的，我在问题中添加了。我尝试了这个，但我收到了错误尝试导入错误：'./App'不包含默认导出（作为“App”导入）。请检查您是否正在为应用程序组件的某个地方的代码中执行任何

默认导入

。我是react的新手。我只使用我在问题中添加的代码。我想我没有使用任何默认导入。我接受了您的代码并尝试使用模板字符串。。它正在工作。。。您需要做的一个更改是在图像路径中添加一个点

。。。不要使用

/images/…

，而是使用

/images/system\u analysis.png

。。表明。。。我将用一个工作示例更新我的答案。。如果有任何进一步的问题，请留下评论-是的，我已经更新了沙箱中的代码。。。答案中的同一链接更新了工作代码。。。。