0

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

Improve this question
3
  • You will have to include some HTML to say this string is an image - <img src="... 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> Commented Nov 17, 2019 at 14:26
  • it shows nothing sir in my component sir @AlbertoSinigaglia Commented Nov 17, 2019 at 14:29

5 Answers 5

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

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

2 Comments

thanks sir it worked for me . Can you please explain why should i put it in the storage directory instead of the public folder?
@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
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.

Improve this answer

7 Comments

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?
in the image in the public folder in your laravel project or in a subfolder of public?
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
the image is in my public/img folder in my laravel project sir
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
|
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
Improve this answer

5 Comments

i saved the image in the public/img path sir and i can view it
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
like this sir? <td><img :src="public/img/teacher.image"></td> It shows me error sir please help
like this: <img v-bind:src="server_url + '/' + 'public/img' + '/' + teacher.image" />
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 ?
1

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

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

1 Comment

I dont know sir why it has this response 1573999337.jpeg:1 GET http://127.0.0.1:8000/1573999337.jpeg 404 (Not Found)
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.