reactjs 图像循环在react js中不起作用？

xqkwcwgp 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(153)

图像循环不工作。循环正在工作，但显示的是字符串数据a、b、c，而不是图像源文件。如何显示图像？

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

export default class Imgs extends Component {
    render() {

        const names = ['a', 'b', 'c'];
        for (let i = 0; i < this.props.level; i++) {
            names.push(<img src={require("./icons/"+names+".jpg")} alt="" className="img-responsive" key={i} />  );
        }
        return (
            <div>
                <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                {names}
                </div>
            </div>
        )
    }
}

reactjs

来源：https://stackoverflow.com/questions/52024625/image-loop-is-not-working-in-react-js

2条答案

按热度按时间

sxpgvts31#

你需要 * Map * 原始数组，而不是推到它：

const names = ['a', 'b', 'c'];
  const imgs = names.map(function(name, i) {
    return <img src={require("./icons/"+ name +".jpg")} alt="" className="img-responsive" key={i} />  
  });

  return (<div>{imgs}</div>);

我们也不清楚为什么你会从0循环到这个.props.level，但我希望这个答案能给你一些指导。
此外，正如Lazar在评论中提到的，您需要有一种方法让Webpack处理您的.jpg文件，例如file-loader加载器。

赞(0）回复(0）举报 2023-06-22

cigdeys32#

我遇到了这个问题，但我设法使用以下代码解决了它。请注意，我目前正在使用React和TypeScript。我希望这段代码能为你解决自己的问题提供一些指导。
这是我用来连接图像路径名的方法。值得注意的是，我使用了require函数，它有效地解决了我面临的问题。

const findProductImage = (path: string) => {
    const result = path.slice(8);
    return require(`../images/${result}`);
}

在我的html

<Box m="auto" sx={{ position: "relative", width: {md:"100%", xs:"80%"} }}>          
     {data.map((item) => (
         <Stack key={item._id} direction="row" spacing={2} sx={{ width: "100%" }}>
              <img src={findProductImage(item.imagePath)} alt="image" width="100%" height="100%" />
         </Stack>
      ))}        
</Box>

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs 图像循环在react js中不起作用？

2条答案

相关问题

热门标签

最新问答