无法在 React Web 应用程序中基于来自 axios 调用的道具渲染图像答案

【问题标题】：Unable to render image based off prop from axios call in React web app无法在 React Web 应用程序中基于来自 axios 调用的道具渲染图像
【发布时间】：2020-11-04 06:08:58
【问题描述】：

我正在尝试使用模板文字呈现图像，并在图像的 src 中使用数据库查询的结果。

但是，模板文字正在被转换为纯字符串。这感觉像是一个基本问题，但我无法弄清楚我做错了什么。

这是我的组件中的渲染函数：

const fetchLoans = this.state.debts.map(debt => {


      return (<div className="individual-loan-amount-outstanding" key={debt._id}>
        <img className="individual-loan-picture" src={('../../../images/${debt.provider}.png')} alt="Provider of loan."/>
        </div>
      )
    })

谁能指出我哪里出错了？谢谢！

【问题讨论】：

最好了解您当前的设置是什么样的。这些图像是否在“公共”文件夹中？您是否使用webpack，如果是，您是否有加载程序设置？你在使用 create react 应用吗？

标签： reactjs

【解决方案1】：

可能是因为您没有在模板中使用反引号？

    <img
      className="individual-loan-picture"
      src={`../../../images/${debt.provider}.png`}
      alt="Provider of loan."
    />

【讨论】：

【解决方案2】：

将' 替换为`:

const fetchLoans = this.state.debts.map((debt) => {
    return (
        <div className="individual-loan-amount-outstanding" key={debt._id}>
            <img className="individual-loan-picture" src={`../../../images/${debt.provider}.png`} alt="Provider of loan." />
        </div>
    );
});

【讨论】：