React не подгружаются картинки?

React

1 ответ

Изучаю реакт, и не получается вывести картинки через пропсы. Выводится только атрибут alt.
1 Структура проекта:

2 Файл headphones.js, картинки распологаются :

import img1 from './img/previews/Apple BYZ S852I.svg' import img2 from './img/previews/Apple EarPods.svg' import img3 from './img/previews/Apple EarPods_.svg'  const headphones = [     {         title: 'Apple BYZ S852I',         img: {img1},         price: 2927,         rate: 4.7,         oldPrice: 3527,     },     {         title: 'Apple EarPods',         img: {img2},         price: 2327,         rate: 4.5,     },     {         title: 'Apple EarPods',         img: {img3},         price: 2327,         rate: 4.5,     },     {         title: 'Apple BYZ S852I',         img: {img1},         price: 2927,         rate: 4.7,     },     {         title: 'Apple EarPods',         img: {img2},         price: 2327,         rate: 4.5,     },     {         title: 'Apple EarPods',         img: {img3},         price: 2327,         rate: 4.5,     }, ]  export default headphones;

import img1 from './img/previews/Apple BYZ S852I.svg' import img2 from './img/previews/Apple EarPods.svg' import img3 from './img/previews/Apple EarPods_.svg' const headphones = [ { title: 'Apple BYZ S852I', img: {img1}, price: 2927, rate: 4.7, oldPrice: 3527, }, { title: 'Apple EarPods', img: {img2}, price: 2327, rate: 4.5, }, { title: 'Apple EarPods', img: {img3}, price: 2327, rate: 4.5, }, { title: 'Apple BYZ S852I', img: {img1}, price: 2927, rate: 4.7, }, { title: 'Apple EarPods', img: {img2}, price: 2327, rate: 4.5, }, { title: 'Apple EarPods', img: {img3}, price: 2327, rate: 4.5, }, ] export default headphones;

3 Файл RegionTop.jsx

import './regiontop.css'; import Cards from './../cards/Cards'; import product from '../../headphones';  const RegionTop = () =&gt;{     return (         &lt;div className='region__top'&gt;             &lt;div className='region__top__title'&gt;             Наушники             &lt;/div&gt;             &lt;div className='region__top__cards'&gt;                 &lt;Cards title={product[0].title} img={product[0].img} price={product[0].price} oldprice={product[0].oldPrice} rate={product[0].rate}/&gt;                 &lt;Cards title={product[1].title} img={product[1].img} price={product[1].price} oldprice={product[1].oldPrice} rate={product[1].rate}/&gt;                 &lt;Cards title={product[2].title} img={product[2].img} price={product[2].price} oldprice={product[2].oldPrice} rate={product[2].rate}/&gt;                 &lt;Cards title={product[3].title} img={product[3].img} price={product[3].price} oldprice={product[3].oldPrice} rate={product[3].rate}/&gt;                 &lt;Cards title={product[4].title} img={product[4].img} price={product[4].price} oldprice={product[4].oldPrice} rate={product[4].rate}/&gt;                 &lt;Cards title={product[5].title} img={product[5].img} price={product[5].price} oldprice={product[5].oldPrice} rate={product[5].rate}/&gt;             &lt;/div&gt;         &lt;/div&gt;     ) }  export default RegionTop;

import './regiontop.css'; import Cards from './../cards/Cards'; import product from '../../headphones'; const RegionTop = () =>{ return ( <div className='region__top'> <div className='region__top__title'> Наушники </div> <div className='region__top__cards'> <Cards title={product[0].title} img={product[0].img} price={product[0].price} oldprice={product[0].oldPrice} rate={product[0].rate}/> <Cards title={product[1].title} img={product[1].img} price={product[1].price} oldprice={product[1].oldPrice} rate={product[1].rate}/> <Cards title={product[2].title} img={product[2].img} price={product[2].price} oldprice={product[2].oldPrice} rate={product[2].rate}/> <Cards title={product[3].title} img={product[3].img} price={product[3].price} oldprice={product[3].oldPrice} rate={product[3].rate}/> <Cards title={product[4].title} img={product[4].img} price={product[4].price} oldprice={product[4].oldPrice} rate={product[4].rate}/> <Cards title={product[5].title} img={product[5].img} price={product[5].price} oldprice={product[5].oldPrice} rate={product[5].rate}/> </div> </div> ) } export default RegionTop;

4 Файл App.js

import Header from "./components/header/Header"; import RegionTop from "./components/regiontop/RegionTop"; import RegionBottom from "./components/regionbottom/RegionBottom"; import Footer from "./components/footer/Footer";  function App() {   return (     &lt;div className="App"&gt;       &lt;Header /&gt;       &lt;RegionTop /&gt;       &lt;RegionBottom /&gt;       &lt;Footer /&gt;     &lt;/div&gt;   ); }  export default App;

import Header from "./components/header/Header"; import RegionTop from "./components/regiontop/RegionTop"; import RegionBottom from "./components/regionbottom/RegionBottom"; import Footer from "./components/footer/Footer"; function App() { return ( <div className="App"> <Header /> <RegionTop /> <RegionBottom /> <Footer /> </div> ); } export default App;

Дополнительно:

- img: {img1}, + img: img1,

- img: {img1}, + img: img1,

Запись img: {img1}, равна img: { img1: '... image content ...' }.

P.S. Ну и:

&lt;div className='region__top__cards'&gt;   {product.map((product) =&gt; (     &lt;Cards key={product.title} title={product.title} img={product.img} price={product.price} oldprice={product.oldPrice} rate={product.rate}/&gt;   )} &lt;/div&gt;

<div className='region__top__cards'> {product.map((product) => ( <Cards key={product.title} title={product.title} img={product.img} price={product.price} oldprice={product.oldPrice} rate={product.rate}/> )} </div>

Спасибо!!!

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Алексей Денисов Ответ

Для того чтобы решить проблему с тем, что React не подгружает картинки, следует выполнить несколько шагов:

1. Убедитесь, что путь к изображениям указан правильно. Проверьте, что путь к изображению указан относительно корня проекта или используете абсолютный путь. Например, если изображение находится в папке public/images, то путь должен быть указан как "/images/example.jpg".

2. Проверьте, что изображения действительно находятся по указанному пути. Откройте консоль разработчика в браузере и проверьте, есть ли ошибки загрузки изображений. Изображения должны быть доступны по указанному пути.

3. Убедитесь, что вы правильно импортируете изображения в компонент React. Используйте метод import для импорта изображений в компоненты. Например:

import React from 'react';
import logo from './logo.png';
 
const App = () =&gt; {
  return (
    <div>
      <img src="{logo}" alt="Logo" />
    </div>
  );
}
 
export default App;

import React from 'react'; import logo from './logo.png'; const App = () => { return ( <div> <img src="{logo}" alt="Logo" /> </div> ); } export default App;

4. Если изображения все еще не загружаются, попробуйте использовать альтернативные способы загрузки изображений, такие как использование URL изображений или пакетов для загрузки изображений, например, react-image или react-image-loader.

Следуя этим рекомендациям, вы сможете решить проблему с загрузкой изображений в React приложении.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 1 ответ

React не подгружаются картинки?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно