Как использовать требование импорта настраиваемого значка с листовкой React?

Я прочитал здесь несколько сообщений о stackoverflow, например React Leaflet - Как отрендерить пользовательское изображение с помощью маркеров круга и значка пользовательского маркера с листком-реакцией О том, как включить пользовательские значки в карты листовок React. Я пробовал приведенный ниже код

const newicon = new L.icon({
      iconUrl: require('../assets/Download-Image.png'),
      iconSize: [30, 30]  
    })

но изображение не отображается на карте.

Однако, если я использую URL-адрес того же значка, что и ниже, он работает и отображается. Какие-нибудь советы о том, что я мог делать не так?

const newicon = new L.icon({
      iconUrl: 'https://www.somewebsite/Download-Image.png',
      iconSize: [30, 30]  
    })

reactjs javascript leaflet react-leaflet react-leaflet-draw
person dontke    schedule 22.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не следует помещать require между '': требуется только путь к изображению внутри.

const newicon = new L.icon({
  iconUrl: require("./assets/marker.png"),
  iconSize: [30, 30]
});

export default function App() {
  const position = [51.505, -0.09];

  return (
    <Map center={position} zoom={13} style={{ height: "500px" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={position} icon={newicon}>
        <Popup>
          A pretty CSS3 popup.
          <br />
          Easily customizable.
        </Popup>
      </Marker>
    </Map>
  );
}

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

import marker from "./assets/marker.png";

а затем используйте это так:

const newicon = new L.icon({
  iconUrl: marker,
  iconSize: [30, 30]
});

Демо

person kboul    schedule 24.10.2020
comment
Спасибо @Kboul, но require между кавычками в моем сообщении была опечатка, я ее исправил. Во всяком случае, я пробовал ваши предложения раньше, но все еще не могу получить изображение для рендеринга на карте. Я просто получаю значок отсутствия доступных изображений. Не уверен, проблема в том, что у меня есть посылка. - person dontke; 26.10.2020
comment
Вы пробовали второй подход? - person kboul; 26.10.2020
comment
Я мог бы помочь, если бы вы могли предоставить демонстрацию своего приложения. - person kboul; 27.10.2020