We Keep Coding

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

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

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 recommend you to pass full path of your image link from controller. using asset() / Storage::url() .
its good way.

Wordpress Media library accessing image captions using wp.media

I'm trying to customise the default functionality of the Wordpress media uploader. All I want to do is access the caption meta data for each image and overlay it on the thumbnail.
I've looked through the output and cant see where the image metadata is saved so i'm assuming it's AJAXed in on selection.
I've read a few articles about creating custom modals using wp.media() which i have got to work but i specifically need to hook into the default modal and then loop through each image, access meta data and then append this to the thumbnail.
Just a pointer on how to access the metadata when first opening the modal would be very helpful
EDIT+++
If i use the following code, when i select an image i can access all of the data i require
_media.on('select', function() {
var attachment = _media.state().get('selection').first().toJSON();
console.log(attachment);
});
I need the same output but from within _media.on('open'...) so i can loop through all images and access their metadata from within the modal
EDIT 2+++
So when the modal is opened, an AJAX request is sent which returns a JSON array of the meta data for the currently loaded images. The order isn't the same as the image order in the modal but this is promising. When you scroll, another request is sent andmore images are loaded, with metadata in another JSON array

I have used wp_prepare_attachment_for_js before for something similar from what I recall.
This will allow you to access the caption for your images which seems to be what you are looking for (I hope). You can find out more about it here in the Codex

Just use attachment.caption, for example if you want to grab the caption and put it as the value of a field:
_media.on('select', function() {
var attachment = _media.state().get('selection').first().toJSON();
console.log(attachment);
$('#field').val(attachment.caption);
});
You may see this webmaster-source.com article for further reference.

Modify url in mobile share buttons

We have a SPA html5 web page that is used in the mobiles. As the detail page is set after the #, I would like to change the url that is sent when an user clicks in the share button to something more informative before the #. That way I change the descriptions, titles, and so on...
Example of what I want:
Url in the browser: url/#id=1
Url sent to the "share": url?id=1
Do you now any way to do it? But I don't want to make another request to the server.
Thanks in advance.

I hope that I understand what you want: you want to catch current url and modify it, right? If so, then do next:
Open this js fiddle http://jsfiddle.net/6Yf3r/.
Fiddle code is
$(document).ready(function(){
var currentUrl = window.location.href;
var newUrl = currentUrl.replace('/_','?');
alert(currentUrl);
alert(newUrl);
});
Ignore first two alerts, and then click run. See what happens with url's in those two alerts? You can now use this code, and modify it to .replace('/#','?');. This function will find the part /# in your URL and replace it with ?. Now you will have desired URL as a string and just use that new url in right place with your share button.

Set Iframe Source on Remote Page via URL Parameter

I have 3 pages that I am working with.
shop_mobile.php
This page retrieves product data from MySQL db and lists formats it. It accepts the url parameters brand=BRANDNAME and cat=CATEGORY.
Here are two examples of this page in action:
http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters
http://solanocycle.com/shop_mobile.php?brand=peacesports&cat=Peace%20Sports%20Scooter
vehicles.html
This page contains links to view specific product listings pages (i.e. "KYMCO Scooters", "Peace Sports Scooters"). When these links are clicked, they should all take the user to the same page (view.html) but pass URL parameters which tell the Iframe within view.html which url to use as its source.
view.html
This page contains an Iframe which gets its source from the URL parameters passed by the links from vehicles.html
Note:
I tried using the solution provided at How do I pass URL parameter to an iFrame in Wordpress page? to solve my problem, but I have never used jquery before and I was not able to get it working correctly.
Any help would be greatly appreciated.
More Info
Sample of a link from Vehicles.html
KYMCO Scooters
What I think View.html should do:
Extract "http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters" from the url "view.html?http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters" and store it as a variable called $embedLink.
Display an Iframe with $embedLink as its source url.

Assuming your link(s) on vehicles.html are well structured, as follows:
view.html?url=http://solanocycle.com/shop_mobile.php?brand=KYMCO&cat=KYMCO%20Scooters
The necessary jQuery for view.html would be:
<script type="text/javascript">
$(document).ready(function(){
var regex = /\?url=(.*)/,
$embedLink = document.location.href.match(regex)[1];
$('iframe').attr('src', $embedLink);
});
</script>
Obviously you would replace 'iframe' with an id or class of the iframe to be more specific.
The alternate would be to use php to extract the request parameter and echo it out in place of the iframe's src attribute:
<?php $embedLink = (isset($_GET['url']) ? $_GET['url'] : ''); ?>
<iframe src="<?php echo $embedLink; ?>"></iframe>
I would recommend performing sanitisation of the request parameter in both cases in order to prevent XSS.

jQuery tooltip + ajax content

I'm trying to implement a simple rollover tooltip for images on a page where when you roll over an image, you get a little tooltip window and have the contents loaded from a database via AJAX.
I can hack this together quickly but I wanted an elegant way of doing this without using any inline JS.
So my question is: If I capture the rollover event inside my external .js file, how do I pass it the database ID?
I'm using jQuery so I would do something like this:
$('.item_roll').mouseover(function() {
//show tooltip and load ajax content
}
and my HTML would be something like this:
<img src="thumb.png" class="item_roll" />
Without calling a function from the img tag, how do I send the JS call above the database id? I hope that makes sense.
Thanks.

I recommend having both a class and an id in the image tag:
<img src="thumb.png" id="id_28436379" class="item_roll" />
Then in your jQuery event, you can access that like so:
$(".item_roll").mouseover(function(event){
alert( event.target.id.split("_")[1] ); // displays 28436379
});
This should let you access the database id by making it the id of the image tag.
EDIT: After reading some helpful comments, I've changed my answer so that the id does not start with an integer, since this is nonstandard and might not work in all browsers. As you can see, the split/[] code extracts the id number from the id string.