无法在 React.js 中的字符串中导入变量

Question

这是我的代码，我尝试从文件夹中链接一些图像

{teamLinks &&

            teamLinks.map(({ title, caption, imgNo }, index) => (

              <div className="col-lg-4">

                <div className="team-member">

                  <img

                    className="mx-auto rounded-circle"

                    src={require(`../assets/img/team/` + { imgNo } + `.jpg`)}

                    alt="logo"

我得到这个错误

×

    Error: Cannot find module './[object Object].jpg'

    ▶ 2 stack frames were collapsed.

    (anonymous function)

    C:/Users/........./Team.jsx:20

 17 | <div className="team-member">

  18 |   <img

  19 |     className="mx-auto rounded-circle"

> 20 |     src={require(`../assets/img/team/` + { imgNo } + `.jpg`)}

     | ^  21 |     alt="logo"

  22 |   />

  23 |   <h4>{title}</h4>

需要一些帮助...

Answer 1

您可以在此处使用两种方法之一。不要把两者混为一谈../assets/img/team/+img编号+.jpg../assets/img/team/${imgNo}.jpg

Answer 2

您的变量“imgNo”有一个对象数据，它需要一个字符串数据。你可以使用 require(&nbsp;../assets/img/team/${imgNo}.jpg)