Can't display image after getting assets path with axios

Question

I'm trying to fetch local images paths with axios and to display theses images using that path in my vue project but I keep getting an error and the image is not getting displayed.

the error:

Request URL: http://localhost:3000/tests/~/assets/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user%20language%20check%20dates%20in%20different%20language/1.png
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:3000
Referrer Policy: strict-origin-when-cross-origin

My code

<template>
  <v-app>
    <app-navbar />
    <v-main>
      <h3>test {{$route.params.name}}, {{$route.query.status}},{{$route.query.tag}}</h3>
      <h3>{{imagesref}}</h3>
      <img :src="imagesref" />
    </v-main>
  </v-app>
</template>

<script>
import appNavbar from '../../../components/appNavbar.vue';
import axios from "axios";
export default {
  components : {appNavbar},
  name: "App",
  data() {
    return {
      items: [],
      imagesref: '',
      test: require('~/assets/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user language check dates in different language/1.png')
    };
  },
  async created() {
    try {
      const res = await axios.get(`http://localhost:3004/tests`,{ params: {name:this.$route.params.name} });
      this.items = res.data;
      this.imagesref=res.data[0].refimages[0];
      
    } catch (error) {
      console.log(error);
    }
  },
};
</script>

I'm hosting a json-server on port 3004 . How can I display images after getting the path ?

What is the value you're getting back in `res.data[0].refimages[0]`? — Phil, Mar 16 '22 at 09:03
@Phil for now it s the same string as the test variable : ~/assets/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user language check dates in different language/1.png — Mohamed Rami BEN ROMDHANE, Mar 16 '22 at 09:07

score 0 · Answer 1 · answered Mar 16 '22 at 09:19

I think the problem is in your URL http://localhost:3000/tests/~/assets/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user%20language%20check%20dates%20in%20different%20language/1.png

/~/ this was supposed to be an alias, and replaced to some kind of path, but it is being passed directly.

You probably need to define proper aliases, here is how you can do it on webpack and vite.

Or you can simply use the relative path without the alias in test: require('~/assets/...)

Can't display image after getting assets path with axios

1 Answers1