Image field and displaying the barcode and storing the html


I succeeded to display the barcode shape in image field, but the problem that if I did refresh, then the image field is becoming blank, it is because the values are not stored. I am using the below code, so what I am missing to save the html code for the image:

   $(frm.fields_dict['serial_no_image'].wrapper).html('<svg id="code128"</svg>');
   $.getScript("/assets/frappe/js/lib/JsBarcode.all.min.js", function( data, textStatus, jqxhr ) {
              JsBarcode("#code128", frm.doc.serial_no, {
                          background: "#FFFFFF",

How to let the barcode always appear in the image and to save it?
Now, once I do refresh, it is disappear.
I know that one of the solutions, I can place it in the refresh event, but this is not practical if I have child table and I have barcodes in each row, so it will not be a good idea to do for loop to each barcode value and place this code for each image.

I need to find a way to keep the barcode appear in the image field even after refresh, how?
I need to use this for barcode child table in the item master.