Question

我尝试将json中的名称集成到图像的路径中

我已经使用了它，并没有真正的帮助，因为该程序“无法解析”路径：

     "./photos/${{row.name}}.jpg"

     "./photos/${row.name}.jpg"

     "./photos/"+{row.name}+".jpg"

    var x = {row.name}
    "./photos/${x}.jpg"

    {items.map(row =>(
                                        <tr>
                                            <td>
                                                <Link to="/doctor">
                                                <img
                                                    src={require("./photos/${{row.name}}.jpg")}

                                                    className="d-inline-block align-top"
                                                    alt={""}
                                                />{row.name}
                                            </Link>
                                            </td>

我希望./photos/nameFromJson.jpg，但无法解决

Answer 1

如果要在字符串中使用变量，最好的方法是使用template literals。

template literals应该看起来像这样：

`string ${expression} string`

因此，您提供的代码段应如下所示：

{items.map(row => (
  <tr>
    <td>
      <Link to="/doctor">
        <img
          src={require(`./photos/${row.name}.jpg`)}
          className="d-inline-block align-top"
          alt=""
        />
        <span>{row.name}</span>
      </Link>
    </td>
  </tr>
))}

如果您的图片名称正确，并且所有内容都在photos内，则它应该像超级按钮一样工作。基本上，您在语法上犯了一些错误。

如何在图像的src路径中集成变量？

1 个答案: