Как интегрировать переменную в путь SRC для изображения?

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, то оно должно работать как шарм.По сути, вы допустили несколько синтаксических ошибок.