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.
Related
I'm using classic editor of CKEditor 5.
And the image upload adapter is using base64 upload adapter.
And my work environment is HTML + CSS + bootstrap + vanilla JS. Node.js is not used.
What I'm trying to do is as follows.
The user uploads the image
When the image is uploaded, Sets the id attribute of the image tag.
The id attribute of the img tag of the final output is output to the value set above.
Perhaps the final result is as follows.
<figure class="image">
<img src="{some image source...}" id="{some id that setted from above.}">
</figure>
First, I needed an event called when the image was uploaded.
When I looked up the official document, I found the following code sample.
const imageUploadEditing = editorRef.plugins.get('ImageUploadEditing');
imageUploadEditing.on('uploadComplete', (evt, { data, imageElement} ) => {
editorRef.model.change( writer => {
writer.setAttribute('id', '1121212', imageElement);
});
});
At first, I probably just run the above code, and the id attribute of the img tag of the final result is '11212' (just temporary data) I thought it would be set to have no.
but the id did not change at the time of editing or when the final markup data was calculated by calling the editor.getData().
So I looked up a little more and found that CKEditor5 was separated into two layers, model and view, and the code I ran earlier was like a code that modified the model, not the view (HTML markup data that the actual user sees).
Therefore, I added the downcast setting by referring to the official document as follows.
editorRef.model.schema.extend('imageBlock', { allowAttributes: ['imageID'] })
editorRef.conversion.for('downcast').attributeToAttribute({
model: {
name: 'imageBlock',
key: 'imageID'
},
view: 'id'
});
I think if i set it as above, the imageID attribute of the model is set when the image is uploaded, and when the model data is downcast and converted to View (like editor.getData() is called or whatever), the image element is found in the model and the imageID attribute is copied to the img HTML tag's id attribute
However, no changes were found in the editing point or HTML output.
Did I understand anything wrong? I just want to set an attribute when the image is uploaded, but I don't know what's so complicated Please help me.
Here's my struggle, i'm trying to display an image from my db, i correctly grab the path of the image from my db, but when i try to put this path in the :src="", src="",or whatever img src it's not showing.
in the inspector i found that when using :src, my getHeader[0].path is taken as a module,
and when using simply src, inspector said that image is not found, because it's tryin to GET on my api, but i just want to put a path of the image in the local ~assets folder.
thanks for replying
<q-img :src="getHeader[0].path" />
computed: {
...mapGetters("header", ["flashGetter"]),
...mapGetters("header", ["getHeader"]),
I have a vue page which uses v-html to place an html content inside a <div> as follows:
<div v-html="noDataMessage">
</div>
And the data of noDataMessage is set in created() lifecycle hook of vue.
created() {
this.noDataMessage = "<img src='../assets/Content/img/Myfav_empty.png' width='35px' height='35px'>";
}
The html tag is showing properly, but it is not able to fetch the image.
I tried to load the image separately to see if image path is correct, and got the image.
Am I missing anything particular to vue.js or v-html in particular?
The issue is in the src url you are using, the src url root is the public directory.
For example, if you have all your images in public->images directory then your code will look like this:
this.noDataMessage = "<img src='images/Myfav_empty.png' width='35px' height='35px'>";
It seems perfect only.
I have implemented the same way to fetch the image, Here I can see the image.
Please check the path once again.
You can check below example where I have tried to implement same way
:http://jsfiddle.net/suprabhasupi/eywraw8t/491005/
I am trying to create an animal's database, for an animal shelter. So far, what I have is a set of tables with the animal's species and when the user chooses the species it shows all animals available. Now I want the user to click on the animal chosen and more details about that animal, such has, location, gender, size, will show. Problem is, I know very little about Javascript/ HTML and I am encountering lots of issues. One of them is showing the image in this third screen of more details. What I have so far with HTML is:
<div class="row" style="text-align: center">
<img src="foto_animal" height="180">
</div>
"foto_animal" is the column in table "Animal" that holds the Image URL. Is there anything I should change with Javascript or is it just a HTML problem? Thanks in advance.
EDIT
I manage to get the URL, this is the script.js file
var populateContact = function(data) {
$('#contact_photo').text(data.foto_animal);
This is the index.html
<h2><span id="contact_photo"></h2>
It shows the URL, but now I want it to be recognize as an image.
EDIT : To have your users download the as requested i nthe comments, try adding a tag and setting it's download property.
Here is an example.
Via html, when referencing an image in src property of the <img> tag, add the file extension of your image file
assuming your foto_animal is a jpeg file and in the same location with the html files,
<img id='myImg' src="foto_animal.jpg" height=180px>
Via javascript,
You simply call the element using document.getElementByID and set the .src property
document.getElementById("myImg").src = "foto_animal.jpg";
Via jquery,
Simply use the .attr property to set src of your tag ID
$("#myImg").attr('src', 'foto_animal.jpg');
I am creating a Domino Document via AJAX that contains a photo.
I am able to get the base64 image data back to the server in a Notes Domino Document.
Data is stored in a Richtext (textarea) field as
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAFA..........." - (this goes on for several lines)
I am trying to display on the Domino Webpage using passthru tag
<<image id= "pic1" >>
in the onLoad event of the Form i try to shove the data into the image element using this code:
//Photo Stuff
alert(document.forms[0].photo1.value);
document.getElementById("pic1").src = document.forms[0].photo1.value;
The alert is showing the data.
Picture is not appearing.
Please help.
Thanks
Mike
I was under the impression that inline images were possible using a data URI.
Like:
<img src="data:image/png;base64,
Your base 64 source. . . "/>
Or
document.getElementById("pic1").src =
'data:image/png;base64,' + document.forms[0].photo1.value;
Edit: tested... here's a jsFiddle:
http://www.jsfiddle.net/UySAb/1/
Mozilla's information on this: https://developer.mozilla.org/en/The_data_URL_scheme
Note: Josiah in his comments is correct as well, your target tag needs to be img, not image.
You can just create an Image object and put the base64 as its src, including the data:image... part like this:
var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);
It's what they call "Data URIs" and here's the compatibility table for inner peace.