[Vuejs]-Vue v-for image not showing. instead it shows string

by

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

👤Rehmat

2👍

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.

👤Komediruzecki

2👍

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
👤fahim152

1👍

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

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

1👍

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.

👤aspirex

Leave a comment