时间戳

首页 > 解决方案 > 没有 URL 的图像显示 React API

reactjs - 没有 URL 的图像显示 React API

问题描述

我看过几十个 youtube 视频，但没有遇到我的问题。

在 React 中，我想显示一张来自 spoonacular API 的图片，我只在控制台中获得“name.png”（即不是完整的 url）。

在setPicture(result.data.results[0].image)我在控制台中获取图片的名称时，我只需要获取它前面的 url。我用以下方法尝试了这个，<img src={`https://spoonacular.com/cdn/ingredients_250x250/${picture}`} alt="food">;我也尝试将 url 放在 useState 中，但这不起作用。

我的完整代码如下：

    const [food, setFood] = useState([]);
    const [picture, setPicture] = useState([])

    useEffect(() => {
        async function fetchFood() {
            const result = await axios.get(`https://api.spoonacular.com/food/ingredients/search?query=rice&number=20&apiKey=${apiKey}`);
            console.log(result);
            console.log("DATA:", result.data);
            console.log("DATA RESULTS:", result.data.results);
            // console.log("DATA RESULTS[0]:", result.data.results[0]);
            // console.log("DATA RESULTS[0]:", result.data.results[0].title);
            setFood(result.data.results[0]);
            setPicture(result.data.results[0].image)
        }

        fetchFood();
    }, []);

    return (
        <div>
            <div>{food.name}</div>
            <img src={`https://spoonacular.com/cdn/ingredients_250x250/${picture}`} alt="food">;
        </div>
    );
}

标签： reactjsimageurlspoonacular

解决方案

JSX 应该关闭/>（或者>如果它有孩子）没有>;

<img src={`https://spoonacular.com/cdn/ingredients_250x250/${picture}`} alt="food" />

>;如果您只想显示一个元素，则可以使用，例如：

function app() {
  return <img />;
}

它会起作用，因为它是return. 而你已经拥有了。

return (
  <div>
    <div>{food.name}</div>
    <img src={`https://spoonacular.com/cdn/ingredients_250x250/${picture}`} alt="food" />
  </div>
); // here

推荐阅读