Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.07.2024, 12:22
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 63

Так получается что в react.js нельзя динамически выводить изображения?
Так получается что в 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 нельзя?
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2024, 13:06
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,521

Можно, если ты точно знаешь конечный адрес изображения на будущем сайте, например положив его в папку 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 в управляемые компоненты итд итп.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2024, 14:35
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 63

не помогло
картинка лежит в 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},
    )
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2024, 19:20
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,521

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
Передача данных из JS в PHP - что не так? Rokugan Общие вопросы Javascript 16 30.09.2011 18:52
О фрилансе (Личный опыт) free Оффтопик 105 18.08.2011 17:02
Поюзайте хомячка Nanto Ваши сайты и скрипты 30 06.06.2011 22:16
Разбираем AjaxOOP eai Общие вопросы Javascript 41 04.11.2010 23:37