0

I have this image tag

<img :src="getImage('450')" style="height:50px;width:50px;">

Here 450 is the image id that i want to get i'm able to get this image name in the getImage function and i want to render the image which is returned by getImage method but current scenario is image name is being returned but image is not rendered inside image tag.

async getImage(id){
    await axios.get(`/get-img?id=${id}`).then((response) => {
        return response.data.image;
})

Image is stored in public/storage/image folder. Any help is highly appreciated.

user3653474
  • 3,393
  • 6
  • 49
  • 135
  • Might want to change `getImage('450')` to `getImage(450)` since it's not a string but an integer. Can you post (in your question) what `/get-img?id=450` returns? – brombeer Dec 04 '20 at 12:03
  • @brombeer: It return name of the image that is saved in database like this 4U8m4KNeTzS3FLbYf9uvSmXqW133dMiK2dwET5J1.jpeg – user3653474 Dec 04 '20 at 12:04
  • first you shouldn't return from callback, second `response.data.image` represents url or binary data? this question is to [this one](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Boussadjra Brahim Dec 04 '20 at 12:05
  • If it only returns the image _name_ you are missing the folder in your img src – brombeer Dec 04 '20 at 12:06
  • @brombeer: i'm getting empty src: like – user3653474 Dec 04 '20 at 12:07
  • @BoussadjraBrahim: I have tried this and have updated code in my question but it is not working, can you please have a look at the above code, – user3653474 Dec 04 '20 at 12:16
  • it should be ```const response=await axios.get(`/get-img?id=${id}`); return response.data.image;``` but this one step in the right way, the other step you should add the base url – Boussadjra Brahim Dec 04 '20 at 12:18
  • @BoussadjraBrahim: Now the url is generated like this : – user3653474 Dec 04 '20 at 12:23
  • what are you using in backend as tool, and how do you open that image independently from front-end – Boussadjra Brahim Dec 04 '20 at 12:25
  • @BoussadjraBrahim: I'm using laravel and mysql, i'm getting this error in console [object%20Promise]:1 GET http://localhost:8000/[object%20Promise] 404 (Not Found) but when i console this response.image it prints image name – user3653474 Dec 04 '20 at 12:32

0 Answers0