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

Question

[CTapbIuDedd]

Изучаю реакт, и не получается вывести картинки через пропсы. Выводится только атрибут 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;

3 Файл RegionTop.jsx

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 (
    <div className="App">
      <Header />
      <RegionTop />
      <RegionBottom />
      <Footer />
    </div>
  );
}

export default App;

Answer 1

[Алексей Уколов]

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

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

P.S. Ну и:

<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>

Comments

[CTapbIuDedd]

Спасибо!!!