local image load error

[birdmanmandbir]

Problem

I use a simple local img '../assets/pano.png', it load nothing but black screen, and in devtools it send a XHR request, not a image request
But if I use img from online resource, it work

This is my vue file.

<template>
  <div class="vr-container">
    <Pano
      :source="url"
      class="pano"
    ></Pano>
    <!-- <img src="../assets/pano.png" alt="pano" /> -->
  </div>
</template>
<script>
import { Pano } from "vuejs-vr";
export default {
  components: { Pano },
  data() {
    return {
      url: "../assets/pano.png",
    //   url: "https://t4.ftcdn.net/jpg/02/09/58/11/360_F_209581186_UIHxT8WvyXZbTbHnNeEu4SFRQ3TdqBHA.jpg",
    };
  },
};
</script>

<style scoped>
body {
  height: 1080px;
}
.vr-container {
    height: 100vh;
    width: 100vw;
}
.pano {
    height: 80%;
    width: 80%;
}
</style>

Please give me some suggestions, thanks!

[mudin]

@birdmanmandbir What is your file structure?
"../assets/pano.png" seems not correct url

[birdmanmandbir]

@birdmanmandbir What is your file structure? "../assets/pano.png" seems not correct url
this is my file structure, I used a relative path.
I'm using windows 11, is this a problem?

[mudin]

@birdmanmandbir Could you try to change url to "/assets/pano.png" or "assets/pano.png"

[birdmanmandbir]

@birdmanmandbir Could you try to change url to "/assets/pano.png" or "assets/pano.png"

I have tried /assets/pano.png, assets/pano.png and ./assets/pano.png, all of them are not work. 😢
Maybe I can create a repo on github, and you can clone and check it. Thanks for your help:satisfied:

[birdmanmandbir]

@birdmanmandbir Could you try to change url to "/assets/pano.png" or "assets/pano.png"

This is my repo: https://github.com/birdmanmandbir/Vue-learn
It's a simple project create by vue-cli