Nuxt•5mo ago

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.

1 Reply

Gugustinette•4mo ago

Hi ! I made an exemple here : https://gugustinette.github.io/Nuxt-Leaflet/components/l-image-overlay.html But still haven't found a way to make the component work correctly :/

LImageOverlay | Nuxt Leaflet

Documentation for the Nuxt Leaflet module

Gaming

Programming

Nuxt3-leaflet not showing local image