Так получается что в react.js нельзя динамически выводить изображения?

[riaron86]

Так получается что в react.js нельзя динамически выводить изображения?
копался в интернете и везде одно и тоже. Изображение надо вручную импортировать в начале файла вроде

import React from 'react';
import mainLogo from '../images/misc/main.png';
function Navbar() {
    return (
        <div className="Navbar">
            <div className="navItem"><img alt={"mainLogo"} className={"img"} src={mainLogo}/></div>
            <div className="navItem"><a href="main" className="aMenuMain">Главная</a><a href="shop" className="aMenuMain">Магазин</a><a href="about" className="aMenuMain">О Нас</a><a href="like" className="aMenuMain">Избранное</a><a href="blog" className="aMenuMain">Блог</a></div>
        </div>
    );
}

//
export default Navbar;

А вывести изображение вписав ссылку в тэг img нельзя?

[Aetae]

Можно, если ты точно знаешь конечный адрес изображения на будущем сайте, например положив его в папку public\static(итп, в зависимости от сборрщика).
Путь от корня:

<img alt={"mainLogo"} className={"img"} src="/images/misc/main.png"/>

Или там, где PUBLIC_URL - путь от корня:

<img alt={"mainLogo"} className={"img"} src={process.env.PUBLIC_URL + "/images/misc/main.png"}/>

Использование import делает магию:
import mainLogo from '../images/misc/main.png';
в зависимости от настроек преврашается в в строку:
'/images/misc/main.8d97f836-e379-4a5a-a63b-27f65505d701.png'
и перекладывает в соответстующую папочку.
А может если картинка маленькая превратить в строку:
'data:image/png;base64,SGVsbG8sIFd ... vcmxkIQ=='
И файла вообще нет.
Ну и множество дополнительных возможностей, типа пожатия картинок, нескольких версий по размерам, преображения svg в управляемые компоненты итд итп.

[riaron86]

не помогло
картинка лежит в C:\react\client\src\images\sfones
отредактировал код до этого

{props.img ? <img className="itemimg" src={process.env.PUBLIC_URL+props.img}/>  : <img className="itemimg" src={emptyimg}/>}

и еще сменил в массисве

{id:1,img:'./src/images/smart/sgs20.jpg', model:"s20",prise:20000,desc:"Мощный и надежный",checkboxid:checkbox1},
        {id:2,img:null, model:"Mi Play",prise:8414,desc:"Функциональный",checkboxid:checkbox2},
        {id:3,img:null, model:"iPhone 14",prise:75682,desc:"Мощный",checkboxid:checkbox3},
        {id:4,img:null, model:"Nova 10 SE",prise:18109,desc:"Красивый",checkboxid:checkbox4},
        {id:5,img:null, model:"18s",prise:53099.56,desc:"Цена Качество",checkboxid:checkbox5},
        {id:6,img:null, model:"Смартфон ASUS ROG Phone 6D ",prise:53450,desc:"Производительный",checkboxid:checkbox6},
        {id:7,img:null, model:"One Touch Idol 4 Pro",prise:17514,desc:"Оптимальный",checkboxid:checkbox7},
        {id:8,img:null, model:"A7000",prise:9000,desc:"Доступный",checkboxid:checkbox8},
    )

[Aetae]

riaron86, нет она там не лежит.
Никого не волнует какая у тебя структура папок на компьютере сейчас.
Важно только какая структура папок будет на сайте после сборки.

Забудь о рекате, вернись к обычному html.
У тебя есть сайт vasya.com, там в корне лежит файл iindex.html в котором есть строчка <img src="./src/images/smart/sgs20.jpg"/>.
Будет ли такое работать? Только если там же в корне будет такая структура каталогов с файлами.
Сборка react(да и любая) не копирует исходики и папки как есть, она собирает по отдельным папкам согласно своих настроек и импортов, результирующая структура там другая.

Сделай build зайди в папку dist и ты увидишь как на самом деле будет выглядеть конечная структура папок и файлов, и как её видит dev-сервер.