javascript - 如何在 React Typescript 中获取图像并返回其 url？

Question

从我的数据库中获取我的 api 我正在尝试获取 produc.image 并返回它的 url 你知道伙计们该怎么做吗？

例如：{product.image} 到 => url 字符串

const Products: React.FC = () => {
  const [products, setProducts] = useState<Props[]>([]);
  const { addItem, removeItem } = useShoppingCart();

  useEffect(() => {
    const fetchProduct = async () => {
    try {
        const res = await axios.get(`${API_URL}/products/`);
        setProducts(res.data);
    }
    catch (err) {
     
    }
  }

    fetchProduct();
  }, []);

  return (
    <section className="products">
      {products.map((product) => (
        <div key={product.sku} className="product">
          <img src={product.image} alt={product.name} /> <-- Pass image to it's url string
          <h2>{product.name}</h2>

标签： javascriptreactjstypescriptaxiosnext.js