图片显示 React API 无 URL

Question

我看了几十个 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>
    );
}

Answer 1

JSX 应该用 /> 关闭（或者 > 如果它有 children）而不是 >;

<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

图片显示 React API 无 URL

Image display React API without URL

url

image

reactjs

spoonacular