时间戳

首页 > 解决方案 > 反应图像源

javascript - 反应图像源

问题描述

我似乎无法弄清楚为什么我的相对路径图像加载不起作用。资产所在的文件结构位于我的工作目录中的 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>
  );
}

标签： javascriptreactjsimage

解决方案

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

然后在开发模式下，您可以像这样对它们进行访问：

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

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

推荐阅读