CODEWITHSUNDEEP
javascriptphplaravelvue.jsv-for
draw134
draw134

Reputation: 1187

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

Upvotes: 0

Views: 2818

Answers (5)

aspirex
aspirex

Reputation: 111

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

its good way.

Upvotes: 1

Rehmat
Rehmat

Reputation: 5071

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.

Upvotes: 2

fahim152
fahim152

Reputation: 2629

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 command 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

Upvotes: 2

Komediruzecki
Komediruzecki

Reputation: 21

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.

Upvotes: 2

modavidc
modavidc

Reputation: 56

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

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

Upvotes: 1

Related Questions