Блог

Главная - Вопросы по программированию - Как получить изображение и вернуть его URL в react Typescript?

Как получить изображение и вернуть его URL в react Typescript?

#javascript #reactjs #typescript #axios #next.js

#javascript #reactjs #typescript #axios #next.js

Вопрос:

извлекая мой api из моей базы данных, я пытаюсь получить product.image и вернуть его URL, вы знаете, ребята, как это сделать?

например: {product.image} to => строка 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>

Комментарии:

1. Так в чем проблема? Вы пробовали запускать свой код, чтобы узнать, в чем ошибка? PS: Вам также нужно будет обнулить проверку массива products в вашем коде JSX

2. Можете ли вы вывести res.data результат, который вы получите обратно?

3. С извлечением у вас проблема или с возвратом?

4. Похоже, вы пытаетесь визуализировать свою выборку до того, как она будет разрешена

5. На сервере мое приложение представляет собой файл, но в next оно ничего не возвращает, я хотел бы получить изображение из API и вернуть URL-адрес изображения.