Установка динамического фонового изображения в React с помощью create-app

Question

В следующем TSX / JSX фоновое изображение не загружается должным образом, поскольку URL-адрес не изменяется во время переноса и поэтому указывает на неправильное местоположение.

Я предполагаю, что это проблема конфигурации веб-пакета,Раньше я настраивал приложения React вручную, но я довольно новичок в создании приложения реакции.Нужно ли извлекать и выполнять ручную настройку, или есть ли лучший подход для динамической загрузки фоновых изображений, которые мне не хватает?

{section.stops.map(s => (
  <div 
    className="tour-stop"
    style={{
        backgroundImage: `url(./img/${s.imagePath})`
    }}
  >
       blah blah blah
  </div>
 ))}

Answer 1

Чтобы динамически установить фоновые изображения для stops, отображаемые для вашего компонента, рассмотрите возможность упаковки списка элементов, возвращаемых из render(), с помощью элемента, такого как <div> или <React.Fragment>, а не { .. }скобки, как показано ниже:

.tour-stop {
  padding:5rem;
  text-align:center;
}

<div id="module"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
<script type="text/babel">

class DemoComponent extends React.Component { 
   
  constructor(props) {
    super(props);
    
    /* Prepopulate the state of the component with image data for subsequnet the render */
    this.state = {

        section : {
            stops : [
                { imagePath : 'https://wallpaperbrowse.com/media/images/background-wallpapers-26.jpg' },
                { imagePath : 'https://wallpaperbrowse.com/media/images/704532.jpg' },
                { imagePath : 'https://wallpaperbrowse.com/media/images/abstract-background-design_1297-88.jpg' }
            ]
        }
    }
  }
    
  render() {
  
      /* Access the section object from state, by which the stops will be rendered */
      const { section } = this.state;

      /* Ensure that the list result returned is wrapped with an element. Usually 
         <div> is used to wrap results however <React.Fragment> can also be useful */
      return <div>{ 
        section.stops.map(s => (<div 
          className="tour-stop" style={{ backgroundImage: `url(${s.imagePath})` }}>
            blah blah blah
          </div>))
      }</div>
  }
}

  ReactDOM.render(
    <div>
      <DemoComponent />
    </div>, 
  document.getElementById("module"));
</script>

Надеюсь, это поможет!

Answer 2

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

пример из вашего кода будет (без какой-либо кодировки):

, если s.imagePath равно 'val1', используйте это изображение: './img/1.jpeg', если нет, используйте что угодно.

Это происходит только тогда, когда вы получаете активы в своем собственном каталоге.