ERR_로 인해 리플릿 JS의 마커가 올바르게 로드되지 않습니다.INVALID_URL 오류

ERR_로 인해 리플릿 JS의 마커가 올바르게 로드되지 않습니다.INVALID_URL 오류

내 리플릿 맵에 마커를 추가하려고 하는데 마커가 표시되지 않습니다.

콘솔에 네트워크 오류 net::가 표시됩니다.다음과 같은 이미지를 로드하는 HTTP 요청의 ERR_INVALID_URL:

Request URL: data:image/png;base64,iVBORw0KGgoAA.....SUVORK5CYII=")marker-icon-2x.png

URL의 마지막 부분을 삭제하면

)marker-icon-2x.png

적절한 base64 부호화 이미지를 얻을 수 있습니다.그래서 문제는 URL 끝에 어떤 마커 아이콘이 추가되느냐입니다.

기타 배경:

• 코드는 다음과 같습니다.

L.marker(coords).bindPopup(someName).addTo(this.map)

• 내 지도는 올바르게 렌더링되고 다각형 등을 그릴 수 있습니다.

• Vue와 Vue2Leaflet을 사용하고 있습니다.

• 리플릿.css를 Import했습니다.

• 다음 코드 행을 포함하려고 했지만 효과가 없었습니다.

delete Icon.Default.prototype._getIconUrl

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

이 방법은 다음과 같습니다.

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
    iconUrl: require('leaflet/dist/images/marker-icon.png').default,
    shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
});

아래와 같이 l-marker의 'icon' 속성에 기본값을 지정하면 이 문제가 해결되었습니다.단, 항상 유효한 기본 이미지 경로가 필요합니다.즉, 적어도1개의 이미지 또는 유효한 URL을 사용할 수 있어야 합니다.참고로, 아래에 언급된 L 객체는 '리플릿' 패키지에서 수입한 것입니다.

defaultIcon = L.icon({
        iconUrl: require('../assets/logo.png'),
        shadowUrl: require('../assets/logo.png'),
    });

언급URL : https://stackoverflow.com/questions/55928916/marker-in-leaflet-js-does-not-load-properly-due-to-err-invalid-url-error