Search code examples
javascriptphplaravelvue.jsv-for

vue v-for image not showing. instead it shows string

I want to show the image of the corresponding user in my table. But when i do a v-for it only shows the image name in a string format in the table. How could i show the image rather than the text itself? Because in laravel blade i can do a foreach loop and it shows the image directly. What should I do? Thanks a lot

My table enter image description here

My axios code and v-for

  <tr v-for="teacher in teachers" :key="teacher.id">
                            <td>{{teacher.id}}</td>
                            <td>{{teacher.image}}</td>
  </tr>


  methods:{
            getTeachers(){
                axios.get('getTeachers')
                    .then((res)=>{
                        this.teachers = res.data
                    })
                    .catch((e)=>{
                        console.log(e)
                    })
            }
        }

vue devtools result

Solution

  • You need to add an image tag and then provide the full path of the image as source. For example:

    <img :src="'/path/to/images/folder/'+teacher.image">

    If you are using Laravel's inbuilt storage, I recommend that you should return the full path of the image from your controller, i.e. use Storage::url() to get the full URL for the image.