We Keep Coding

CKEditor5 : how to add id attribute to img tag when image uploaded?

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.

Get image src through jQuery .load()?

so I just had a quick question about jQuery .load().
Is there a way I can load the 'src' field of a div on another page into a variable on my current page? So if it is:
<div class="test"> <img class ="image" src="imagelink">
I would like to get the imagelink in my current HTML page using JS / jQuery. I've tried doing ${#loadhere}.load("URL .image") as per the documentation https://api.jquery.com/load/ but it doesn't seem to get me the image link. My plan is to get the link and then $(#loadhere).attr('src', LINK) as per this SO post: jquery changing image src

If all you want is to parse something from another page using $.get() would be more practical as it won't insert anything into the current page unless you want to yourself.
You can wrap the response html in $() and maniplate or query that html the same as you would do in the current page
$.get('otherPage.html').then(function(res){
const src = $(res).find('.test .image').attr('src');
$('#currentPageImage').attr('src', src)
})

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.

Generating info from an image's name

I've tried searching for an answer around the web but couldn't find any so apologies in advance..
Let's say I have a folder called 'designs' with images
design1_main_front.png
design1_mockup-black.png
design1_mockup-white.png
design2_main_front.png
design2_mockup-black.png
design2_mockup-yellow.png
design2_mockup-red.png
All I want is to retrieve the ones with '_front' one by one and add them to a class
Add the ones with '_front' to an 'img' tag
Add the ones with 'mockup' to a select-options tag in a way that if I click the dropdown and click on a color's name, the img src changes to the designx_mockup-"color".png
(the color name should be retrieved from the image's title)
I hope it was clear enough to understand, I would appreciate your help

First start by adding an image element for both of the front images. Each of the image tags should have an id.
<img src="some_image.jpg" id="image_one">
Then create a select box and set the value for each option to the file name you want
<select onchange="updateImage(this);">
<option value="design1_mockup-black.png" >Black</option>
</select>
The update image function will take in the dom node of the event (the option). You can then get the value and set the image to the new file.

javascript or jquery method of getting the source of an image if.. matching a certain pattern

I have a very old site with lots of files, for years it was put together and orgainized by year and in a particular fashion. Well I am upgrading the site. But in one section an "Articles" section I have close to 1,000 files, that I don't want to go through and manually edit one or two images per.
So I am hoping i can figure out a way to match the source tag where when the source is ../imgs/ I can find the actual file name being used and just change the source. My problem is finding the source attribute matching it to the dired and then getting the image name off the end of it. when the full path could be like
../imgs/i2012/image-file.png, ../imgs/i2011/image-file.png, ../imgs/i2010/image-file.png, ../imgs/i20xx/image-file.png "image-file.png" just being an arbitrary example
Its hard to visualize a image tag, so I am adding one here for reference..
<img src="../imgs/i2012/example-image.png" alt="example-image" vspace="5" hspace="5" align="left" />
And to try and re-elaborate, not all images on the site stopped working, and all else, but the ones that have use an image source attribute similar to the above, but the i20xx and file name are different. So. I am trying to figure out how to take that image src tag. Find if it has ../imgs/ in it, and and if it does, I'd like to grab the "example-image.png" from it, so I can apply a new URL overall to the src attribute in the end using JS, which changing it isn't my problem, matching it so I can then get the file, and change the url appending that file to the url is my problem

You can use the attribute starts with selector to match any images with a source starting with
../imgs/, and then iterate over those images, getting the filename into an array:
var images = [];
$('img[src^="../imgs/"]').each(function(i, el) {
images.push( $(el).attr('src').split('/').pop() );
});