ATL Posts - Answer Overflow

ATL

•Created by ATL on 5/1/2024 in #❓・help

Nuxt3-leaflet not showing local image

I realize that this might not have much to do with Nuxt module specifically as it's just using vue-leaflet. In any case I've tried to troubleshoot this plenty, but have hard time finding much as vue3-leaflet is quite new. My current code looks something like this. Template:

<LMap
      ref="map"
      v-model:zoom="zoom"
      :crs="crs"
      :center="[height / 2, width / 2]"
      :min-zoom="-1"
      :max-zoom="1"
    >
      <l-image-overlay
        :url="imageOverlayUrl"
        :bounds="bounds"
      ></l-image-overlay>
 </LMap>

<LMap
      ref="map"
      v-model:zoom="zoom"
      :crs="crs"
      :center="[height / 2, width / 2]"
      :min-zoom="-1"
      :max-zoom="1"
    >
      <l-image-overlay
        :url="imageOverlayUrl"
        :bounds="bounds"
      ></l-image-overlay>
 </LMap>

Script:

const imageOverlayUrl = ref("/assets/images/test.png");
const crs = CRS.Simple;
const width = ref(4000);
const height = ref(3000);
const zoom = ref(0);

const imageOverlayUrl = ref("/assets/images/test.png");
const crs = CRS.Simple;
const width = ref(4000);
const height = ref(3000);
const zoom = ref(0);

I've tried following options as imageOverlayUrl's string inside the ref: Normal web url - Works ~/assets/images/test.png - Doesn't work @/assets/images/test.png - Doesn't work src/assets/images/test.png - Doesn't work assets\images\test.png (relative path according to vs code) - Doesn't work And of course the one I have there in the example code. Which I would expect to work as it autocompletes while writing. Also I have tried with different image types etc. Any advice on how to proceed would be appreciated.

2 replies

Gaming

Programming