# Set image source from datasource base64 string

**URL:** <https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784>\
**Category:** Get Help\
**Tags:** data-source\
**Created:** [March 7, 2025, 6:13pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784 "2025-03-07T18:13:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mjcolli](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mjcolli](https://community.fliplet.com/u/mjcolli)\
**Post date:** [March 7, 2025, 6:13pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/1 "2025-03-07T18:13:45Z")

</div>

Is it possible to hook a List from datasource with flListDataAfterGetData and set an image source to a base64 image string?

I have the following but this is my first time reading the data in javascript and I’m unsure how to reference the column (Picture) or set the image display field source with the base64 encoded text transformed to a jpg:  
Fliplet.Hooks.on(‘flListDataAfterGetData’, function (options) {  
.forEach(options.records, function(record) {  
[//Fliplet.Dencode.base64](https://Fliplet.Dencode.base64)()  
});

});

---

<div class="post-metadata">

**Author:** ![mjcolli](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mjcolli](https://community.fliplet.com/u/mjcolli)\
**Post date:** [March 11, 2025, 8:08pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/2 "2025-03-11T20:08:13Z")

</div>

I don’t believe Fliplet has a decode for base64, so I’ve used this:  
var b64String = record.data[‘Picture’];  
//alert(b64String);  
var decodedString = atob(b64String);

I do not know how to now set the Picture field from the datasource to the decoded string and then set the source of the list from datasource image field to this data.

---

<div class="post-metadata">

**Author:** ![mjcolli](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mjcolli](https://community.fliplet.com/u/mjcolli)\
**Post date:** [March 13, 2025, 5:21pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/3 "2025-03-13T17:21:59Z")

</div>

Update: Getting closer, but alerts do not show the b64 data and the images are still not displaying. Any help would be appreciated.

Fliplet.Hooks.on(‘flListDataBeforeRenderList’, function(data) {

// The data.records contains the entries fetched by the component  
var entries = data.records;

var count = 0;  
var insideCount = 0;

// Process each entry to decode Base64 and update the image column  
entries.forEach(function(entry) {  
if(entry.data[‘Picture’].trim() !== “Not Found”){

```
  if(count < 1){
   	alert("Count: " + count);
    count++;
  }
  
  if (typeof entry.data['Picture'] === 'string') {
    
			var base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
    
   // alert(bPic);
    try {
      // Check if the string is a valid Base64 or already a data URI
      var bPic = /^data:image\/[a-z]+;base64,/.test(entry.data['Picture']);
      //var bPic2 = /^[A-Za-z0-9+/=]+$/.test(entry.data['Picture']);
      var bPic3 = base64regex.test(entry.data['Picture']);
      if (bPic) {
        alert("Already a data URI, no decoding needed");
        
        // Already a data URI, no decoding needed
        return;
      } else if (bPic3) {
        // Assuming it's raw Base64, create a data URI
        var dataUri = 'data:image/jpeg;base64,' + entry.data['Picture']; // Adjust mime type if needed
        
       // alert("dataUri: " + dataUri);
        
        entry.data['Picture'] = dataUri; // Replace the column value
        
        if(insideCount < 1){
         	alert("Entry:" + entry.data['Picture']);
          insideCount++;
        }
      }
      else{
         //alert("bPic: " + bPic);
        //alert("bPic2: " + bPic2);
      }
    } catch (e) {
      console.error('Error processing Base64 for entry:', entry.id, e);
      alert("Error");
      // Set a fallback 1x1 transparent pixel image
      entry.data['Picture'] = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==';
    }
  }
}else{
  if(count < 1){
   	alert("Entry:" + entry.data['Login ID'] + "||");
    count++;
  }
}

```

});  
});

---

<div class="post-metadata">

**Author:** ![Deb](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/deb/32/159_2.png) [@Deb](https://community.fliplet.com/u/Deb)\
**Post date:** [March 13, 2025, 5:36pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/4 "2025-03-13T17:36:26Z")

</div>

Hi Micheal,

Just so I understand the situation, you have a a list of entries in the data source and the Picture column contains base64 strings? You want to display these are images in the LFD, is that correct?

Thanks,  
Deb

---

<div class="post-metadata">

**Author:** ![mjcolli](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mjcolli](https://community.fliplet.com/u/mjcolli)\
**Post date:** [March 13, 2025, 8:00pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/5 "2025-03-13T20:00:08Z")

</div>

Yes. 100%

---

<div class="post-metadata">

**Author:** ![mjcolli](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mjcolli](https://community.fliplet.com/u/mjcolli)\
**Post date:** [March 13, 2025, 9:29pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/6 "2025-03-13T21:29:00Z")

</div>

This is the error I’m getting:  
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘Picture’)  
at preview?disableSecurity&disableNavigation&auth\_token=us–session–c6dea04ff65cef5a0a2c1ad16084c8cd-607-479-0009:599:18  
at Array.forEach ()  
at preview?disableSecurity&disableNavigation&auth\_token=us–session–c6dea04ff65cef5a0a2c1ad16084c8cd-607-479-0009:598:11  
at fliplet-core.bundle.js?_=35b39f:1466:29  
at Array.map ()  
at Object.run (fliplet-core.bundle.js?_=35b39f:1465:54)  
at DynamicList.renderLoopHTML (small-h-card-code.js?_=1741095380:650:24)  
at small-h-card-code.js?_=1741095380:501:13

---

<div class="post-metadata">

**Author:** ![Veljko](https://avatars.discourse-cdn.com/v4/letter/v/dbc845/32.png) [@Veljko](https://community.fliplet.com/u/Veljko)\
**Post date:** [March 14, 2025, 10:02am UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/7 "2025-03-14T10:02:00Z")

</div>

Hi Michael, you can use this code.

```auto
function setBase64Image(base64String, imgElementId) {
  let imgSrc = base64String.trim(); // Remove extra spaces
  
  // Check if the string already includes a data URI
  if (!imgSrc.startsWith("data:image")) {
    // Try to detect MIME type from the Base64 string (optional, but helpful)
    let mimeType = "image/png"; // Default MIME type
    if (imgSrc.charAt(0) === "/") mimeType = "image/jpeg";
    else if (imgSrc.charAt(0) === "R") mimeType = "image/gif";
    else if (imgSrc.charAt(0) === "i") mimeType = "image/png";
    else if (imgSrc.charAt(0) === "U") mimeType = "image/webp";
    
    // Add the proper data URI prefix
    imgSrc = `data:${mimeType};base64,${imgSrc}`;
  }

  return imgSrc
}

Fliplet.Hooks.on('flListDataAfterGetData', function(options) {
  options.records = options.records.map(el => {
    el.data.Picture = el.data.Picture ? setBase64Image(el.data.Picture) : ""
    return el
  })
});

```

Hope this will solve your problem.

Kind regards,  
Veljko

---

<div class="post-metadata">

**Author:** ![mjcolli](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mjcolli](https://community.fliplet.com/u/mjcolli)\
**Post date:** [March 14, 2025, 3:40pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/8 "2025-03-14T15:40:59Z")

</div>

Thank you very much for this. It does work, however it’s very slow. Can it be called asynchronously?

---

<div class="post-metadata">

**Author:** ![Deb](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/deb/32/159_2.png) [@Deb](https://community.fliplet.com/u/Deb)\
**Post date:** [March 14, 2025, 4:08pm UTC](https://community.fliplet.com/t/set-image-source-from-datasource-base64-string/784/9 "2025-03-14T16:08:29Z")

</div>

Hi Micheal,

That depends on what part is slow, I am guessing loading large base 64 strings for many records will be slow due to the amount of data that is downloaded. You best option there is to set a limit to the LFD or apply some sort of filter to reduce the number of records being loaded. Obviously there is the option of uploading the images to our file system and putting the links for the files against each record which would significantly reduce the amount of data being downloaded.

Thanks,  
Deb