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

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

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)
                    })
            }
        }

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

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)
                    })
            }
        }

• javascript
• php
• laravel
• vue.js
• v-for

Share Improve this question Follow asked Nov 17, 2019 at 14:23 draw134draw134 1,19744 gold badges4141 silver badges9898 bronze badges 3

• You will have to include some HTML to say this string is an image - <img src="... – Nigel Ren Commented Nov 17, 2019 at 14:26
• well you are just printing the path, try with <tr v-for="teacher in teachers" :key="teacher.id"><td>{{teacher.id}}</td> <td><img src = " {{teacher.image}} " ></td></tr> – Alberto Commented Nov 17, 2019 at 14:26
• it shows nothing sir in my ponent sir @AlbertoSinigaglia – draw134 Commented Nov 17, 2019 at 14:29

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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 remend 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.

You need to wrap the image url inside appropriate HTML tag.

Something in the lines of:

<img :src="teacher.image">

When doign this you are adding image into your HTML page and syntax ':src' is used to bind the html attribute 'src' with vue variable (in this case your image link/name).

If the image is not showing after that your link is invalid. Check the image url, and see if you can get it directly from the browser. If server is not returning appropriate image at that url than it will not work. Use 'alt' attribute to set text instead of image to see if this is happening.

The issue is the way you saved your image. you saved the only image name in database, not the path. whenever you upload something via form in laravel. it keeps the file in public/storage.

Run the mand first

php artisan storage:link

heres what you can do. use below code to save your image in db when you submitting form( i assume you are registering teachers in the system )

after that your image column will contain the total path of your image.

     if(!empty($request->file('image_file'))){
                $path = storage_path('public/teacher-images/');

                if(!File::isDirectory($path)){
                    File::makeDirectory($path, 0755, true, true);
                }
                $image_path = Storage::disk('public')->put('teacher-images', $request->file('image_file'));
                $teacher->image = isset($image_path) ?  "storage/".$image_path : "";
            }

after that you can use that picture to show on your template by appending serverurl

You are trying to show an image, therefore, you should use:

<img v-bind:src="teacher.image" />

Your server cannot find your image only the file name. So I remend you to pass full path of your image link from controller. using asset() / Storage::url() .

its good way.