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

Question

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

You will have to include some HTML to say this string is an image - <img src="... — Nigel Ren
– 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
– Alberto, Commented Nov 17, 2019 at 14:26

Rehmat · Accepted Answer · 2019-11-17 14:43:59Z

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.

answered Nov 17, 2019 at 14:43

Rehmat

5,1515 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

draw134 Over a year ago

thanks sir it worked for me . Can you please explain why should i put it in the storage directory instead of the public folder?

Rehmat Over a year ago

@Vince Glad to know that it worked. By default, Laravel's public directory is the entry point. And Laravel's filesystem symlinks the publicly uploaded files to public directory when you run php artisan storage:link. You should read their docs thoroughly understand all this. Here is the link to the docs: laravel.com/docs/5.7/filesystem#file-urls

Komediruzecki · Accepted Answer · 2019-11-17 14:32:45Z

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.

edited Nov 17, 2019 at 14:32

answered Nov 17, 2019 at 14:30

Komediruzecki

211 silver badge4 bronze badges

7 Comments

draw134 Over a year ago

it gives me a response of 1573999337.jpeg:1 GET http://127.0.0.1:8000/1573999337.jpeg 404 (Not Found) and i dont know why?

Alberto Over a year ago

in the image in the public folder in your laravel project or in a subfolder of public?

Komediruzecki Over a year ago

Your link is invalid. Check if you localhost server actually have the image at that location. If you have some kind of "public" folder with resources, the images should be there. The path you are using can be relative or absolute. See this for clarification: w3schools.com/html/html_filepaths.asp

draw134 Over a year ago

the image is in my public/img folder in my laravel project sir

Komediruzecki Over a year ago

See this for better understanding: stackoverflow.com/questions/40989290/… The url should then be "img/imageName". (do not write the public in path) For example: :src="img/1573999337.jpeg", or :src="/img/1573999337.jpeg" depending if you want relative or absolute path

|

fahim152 · Accepted Answer · 2019-11-17 14:38:45Z

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

answered Nov 17, 2019 at 14:38

fahim152

2,6191 gold badge13 silver badges29 bronze badges

5 Comments

draw134 Over a year ago

i saved the image in the public/img path sir and i can view it

fahim152 Over a year ago

save it in your storage ! run the command above Now you can append server_url/public/img/<<file_name>> to img src in template . it will show

draw134 Over a year ago

like this sir? <td><img :src="public/img/teacher.image"></td> It shows me error sir please help

fahim152 Over a year ago

like this: <img v-bind:src="server_url + '/' + 'public/img' + '/' + teacher.image" />

fahim152 Over a year ago

Actually when you save something it stored on storage folder. by running command php artisan storage:link , laravel will create a symbolic link of storage folder into your public directory. are you saving teacher's image via form submission or manually putting image on public/img folder ?

modavidc · Accepted Answer · 2019-11-17 14:29:25Z

1

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

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

answered Nov 17, 2019 at 14:29

modavidc

564 bronze badges

1 Comment

draw134 Over a year ago

I dont know sir why it has this response 1573999337.jpeg:1 GET http://127.0.0.1:8000/1573999337.jpeg 404 (Not Found)

aspirex · Accepted Answer · 2019-11-17 15:13:33Z

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.

answered Nov 17, 2019 at 15:13

aspirex

1113 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

7 Comments

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

7 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related