如何使用模板字符串从道具创建链接并在 React 组件中渲染图像

Question

我正在尝试创建一个链接以根据道具上可用的 ID 导入图像资产。示例资产是 p4916.png，其中 4196 是 props.data.player.id 上可用的 ID

我已经在调试器中检查了 img 正确构建的 url 等于注释掉的 url 导入，但是当我在 src={img} 中使用对它的引用时，它是被忽略，使用 src={url} 完全相同的字符串工作

还有什么额外的步骤吗？这是 create-react-app 设置 btw 的一部分

import React, { Component } from 'react';

//import url from '../assets/p4916.png';

const PlayerStats = (props) => {

  const team = props.data.player.currentTeam.name

  debugger
  const img = `../assets/p${props.data.player.id}.png`

  const first_name = props.data.player.name.first
  const last_name = props.data.player.name.last
  const position = props.data.player.info.positionInfo

  return (
    <div>
      <div key={last_name}></div>
      <div className="card__player-image"><img src={img} alt="" /></div>
      <div className="card__club-badge"><div className={team}>{team}</div></div> 

      <div className="card__info">
        <div className="info">{first_name} {last_name}</div>
        <div className="info">{position}</div>
      </div>

      <div className="card__stats-group">  
        <div className="stats-group__item">Appearances<span className="stats-group__item-data">1</span></div>
        <div className="stats-group__item">Goals<span className="stats-group__item-data">2</span></div>
        <div className="stats-group__item">Assists<span className="stats-group__item-data">3</span></div>
        <div className="stats-group__item">Goals per match<span className="stats-group__item-data">4</span></div>
        <div className="stats-group__item">Passes per minute<span className="stats-group__item-data">5</span></div>
      </div>
    </div>
  )

}

export default PlayerStats;

Answer 1

由于 create-react-app，它不适用于您正在使用的绝对路径。 CRA 的开发服务器使用这样的图像：static/media/your_img_name.somerandomid.jpg 因此，当您将它与绝对路径一起使用时，它不起作用。

在构建您的应用程序之前，没有static 目录，但这就是 devserver 在开发模式下的工作方式。构建您的应用程序后，您可以在 build 目录中看到此目录，其中包含与 CRA 给它的文件名称相同的文件。

如果您正在使用图像上传系统，或者您的应用对后端服务器进行某种操作，您需要找到一些更好的方法。

如果没有后端服务器，而你只是想轻松解决这个问题，我想你可以使用require：

<div className="card__player-image"><img src={require(`../assets/p${props.data.player.id}.png`)} alt="" /></div>

是的，这不是一种体面的方式。但是我不知道有什么更好的方法，希望有一个。