反应图像源答案

【问题标题】：React Image Source反应图像源
【发布时间】：2020-06-10 01:32:38
【问题描述】：

我似乎无法弄清楚为什么我的相对路径图像加载不起作用。资产所在的文件结构位于我的工作目录中的 src 文件夹中，但它们似乎不起作用。

如果我直接导入import image from '../Assets/color/cloudy.svg'它可以工作，否则它就不能工作。我不想直接导入，因为逻辑是根据通过道具传递的值查询适当的图像（总共 27 张图像）。

任何帮助将不胜感激。


export default function Main(props) {
  const { weather } = props;
  //   let img_src = weather.weather_code.value;
  const img_src = '../Assets/color/cloudy.svg';
  console.log(img_src);
  return (
    <div className="center">
      <div className="title">
        <span className="currently">
          <span>
            <img src={img_src} alt="weather" />
          </span>
          <span className="description">
            <span className="summary">
              <span className="label">Temperature:</span>
              <span>
                {weather.temp.value} {weather.temp.units}
              </span>
            </span>
            <span className="summary-high-low">
              <span className="label">Feels Like:</span>
              <span>
                {weather.feels_like.value} {weather.feels_like.units}
              </span>
            </span>
          </span>
        </span>
      </div>
    </div>
  );
}

【问题讨论】：

因为当您导入时，您有一些 webback 加载程序（如果您使用 CRA）发挥其作用并解决这个问题。如果你只是指定一些路径，它在你的开发服务器上将不可用

标签： javascript reactjs image

【解决方案1】：

一种简单的方法是在应用程序的 public/ 文件夹下创建一个文件夹，并将所有图像放在那里。

然后在开发模式下，您可以像这样获取它们：

<img src="/imageFolder/cloudy.png" alt="cloudy" />

这在生产中也应该可以正常工作，因为 public 下的文件夹已添加到项目中。

【讨论】：

【解决方案2】：

如果你使用的是webpack，你需要导入图片：

<img src={require('images/06.jpg')} alt="product" />

由于您的图像数据是动态的，因此直接指定导入路径，如

<img src={require(image)} alt="product" />

没用。

但是，您可以通过使用模板文字来导入图像，例如

<img src={require(`${image}`)} alt="product" />

【讨论】：