Динамический URL для изображений в папке SRC

У меня есть хранилище с картинками в папке src:

const pictures: Array<CarouselPicture> = [
 {
    index: '1',
    url: '../../data/carousel/carousel1.png',
    description: ''
 }
export default pictures;

URL-адреса правильные для этого файла, я без проблем могу добраться до всех своих картинок. Также у меня есть компонент, где используется это хранилище:

import pictures from './CarouselData'

export default class ImageContainer extends Component {
 render() {
  return (
    <div className='carousel_image-container'>
     {pictures.map((pic) => {
       return (
        <div key={pic.index}>
         <img src={pic.url}></img>
        </div>
       )})}
   </div>
  )
 }
}

Для этого компонента URL-адреса неверны, и я не могу получить доступ к своим изображениям. Как я могу решить эту проблему? Я хочу написать URL-адрес один раз в своем хранилище, а затем использовать хранилище в нескольких разных компонентах в разных папках в моем проекте, не меняя URL-адреса моих изображений. Другими словами, я хочу получать пути динамически.

Я понимаю, что {pic.url} неверен, но я не знаю, как это правильно запрограммировать.

PS: Соответственно, здесь есть вопросы, было бы лучше хранить изображения в папке src, а не в публичном доступе, поэтому я думаю, что «process.env.PUBLIC_URL» не является решением (хотя кто его знает).

Было бы полезно, если бы вы сказали, на чем основан ваш проект, например. NextJS, CreateReactApp, пользовательский. Все они различаются тем, как обрабатывать общедоступные пути и изображения.

Dominic 17.05.2022 11:38

@Dominic, честно говоря, я не знаю, я новичок в реагировании. Я использовал команду «npx create-react-app my-app --template typescript» для инициализации моего проекта.

EaredGen 17.05.2022 11:41
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
2
22
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Из-за конфигураций веб-пакетов url: '../../data/carousel/carousel1.png', или встроенные <img src="../../data/carousel/carousel1.png"/> часто работают для внешних ссылок, таких как url: 'https://external/image/link.png'

В вашем случае стоит попробовать require('../../data/carousel/carousel1.png') или import carousel1 from '../../data/carousel/carousel1.png'

Ваша догадка об использовании process.env.PUBLIC_URL верна при использовании папки public/. Предполагая, что ваши изображения находятся в public/data/:

const pictures: Array<CarouselPicture> = [
 {
    index: '1',
    url: `${process.env.PUBLIC_URL}/data/carousel/carousel1.png`,
    description: ''
 }
]

И, как вы сказали, вы также можете сделать это по-другому и переместить изображение в свою папку src/. Либо один хорошо.

Они могут быть расположены где угодно в src/, и вы импортируете их, используя обычные правила импорта:

import carousel1 from './images/carousel1.png'
import carousel2 from './images/carousel2.png'

const pictures: Array<CarouselPicture> = [
  {
     index: '1',
     url: carousel1,
     description: ''
  },
  {
    index: '1',
    url: carousel2,
    description: ''
 }
]

Создайте файл, который будет экспортировать изображения как переменную. как это. Например- imageExporter.js

  export const imageA = {id:1, url:"./your correct relative path for image",  description: 'some description'};

и в вашем компоненте импортируйте эти изображения как переменные и используйте их в качестве источника изображений

import {imageA} from './ imageExporter.js path here'


and then

<img src={imageA.url} />

Другие вопросы по теме