Dynamically display images on vue front end from api

Question

I am trying to display an image dynamically based on the path given from an api call. All the other data is displaying correctly, but not the image. I suspect that I am not inputting the correct path. The front end is in a folder called client and the images are in a subdirectory of the cms folder, which is in the same directory as client.

Frontend: root/client/src/components/Arrangements.vue

Images: root/cms/public/uploads/some-image.png

Here is my code:

Template

    <div v-if="arrangements.length">
        <div :key="arrangement.index" v-for="arrangement in arrangements">
            <img :src="getImages(arrangement.img.formats.thumbnail.url)" alt="">
            <p>{{ `${arrangement.title}` }}</p>
            <p>{{ `$${arrangement.price}` }}</p>
        </div>
    </div>

Script

    import axios from "axios";
    
    export default {
        data() {
            return {
                arrangements: []
            }
        },
        mounted() {
            axios.get("http://localhost:1337/arrangements")
                .then(res => {
                    this.arrangements = res.data;
                })
                .catch(error => {
                    this.error = error;
                })
        },
        methods: {
            getImages(url) {
                return '/cms/public' + url;
            }
        }
    }

API Call

EDIT:

Project Structure

My front end code where I am trying to access the images is Arrangements.vue, while the images are in cms/public/uploads

Answer 1

You need to use require to get images. Try this way.

In your case you can use this way.

 getImages(url) {
      return require('../../../cms/public/' + url);
  }

Note: I'm considering that your image path is correct. I'm used to use the variable @ to access the assets folder, something like that:

<img :src="require('@/assets/img/my_image.png')" />