使用 Typescript 处理图像 - NextJS

Question

我有一个简单的网站，它从 Spoonacular API 获取数据并搜索成分，响应带有标题和图像。我已将类型声明为：

export interface IProps {
    id: number;
    name: string;
    image: string;
  }

到目前为止，我的配料表如下：

const List = (props: { ingredient: IProps }) => {
  const { ingredient } = props;

  return (
    <Container>
      <Box>
        <Image src={ingredient.image} alt={ingredient.name} />
        <Box>
          {ingredient.name}
        </Box>
      </Box>
    </Container>
  );
};

export default List;

我已经删除了与此处样式相关的所有内容，仅供参考。

道具来自我打电话的地方：

const Search = () => {


  const [ingredients, setIngredients] = useState<IProps[]>([]);
  const [value, setValue] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    axios
      .get(
        `https://api.spoonacular.com/food/ingredients/search?query=${value}&number=2&apiKey=${URL}`
      )
      .then((res) => res.data)
      .then((data) => data.results)
      .then((data) => setData(data))
      .catch((err) => console.log(err));
  };

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <Flex justifyContent="center">
      <Flex direction="column">
        <Heading mb={6}>Search Recipe</Heading>
        <Input
          onChange={handleChange}
          value={value}
          name="search"
          id="search"
          placeholder="Write here..."
          variant="filled"
          mb={2}
          type="text"
        />
        <Button onClick={handleSubmit} mb={5}>
          Search
        </Button>
       
      </Flex>
      {ingredients.map((ingredient) => (
        <List key={ingredient.id} ingredient={ingredient} />
      ))}
    </Flex>
  );
};
export default Search;

但我没有得到的是我从图像中得到 404 的事实：

Request URL: http://localhost:3000/lemon.png
Request Method: GET
Status Code: 404 Not Found
Remote Address: 000.0.0.0:0000
Referrer Policy: strict-origin-when-cross-origin

由于我是 typescript 的新手，我可能错过了一些非常基本的东西？

Answer 1

发生的事情是 API 只给你一个像 lemon.png 这样的文件名。要从 API 中定位图像，您需要在将其传递到 Image 组件之前将其附加到字符串 https://spoonacular.com/cdn/ingredients_100x100/ 中，即在这种情况下，您最终会得到 https://spoonacular.com/cdn/ingredients_100x100/lemon.png.

您可以在此处 (link to Spoonacular API docs)

找到有关从 API 获取图像的更多信息

Answer 2

添加 Ritik Mishra 所说的内容，作为您和其他使用 Spoonacular 的人的示例，您的 src 看起来像：

src={`https://spoonacular.com/cdn/ingredients_250x250/${ingredient.image}`}

使用 Typescript 处理图像 - NextJS

Handling images with Typescript - NextJS

typescript

next.js

spoonacular