Hello TB community,
I cant get the image to display properly on front end. I have a link field_68 in the table which contains the href link to the photo image of person in the org chart. The image does show up in the data table component on the front end and also in the table records view but the image wont show properly in the html component.
any ideas what im doing wrong anyone? screenshot and codes are below
console.log(“Fetched Data Records:”, data.records);
const newRecords = data.records.map(record => ({
id: record.id || null,
pid: record.field_39 || null,
ppid: record.field_51 || null,
tags: record.field_49 ? [record.field_49] : [],
title: record.field_37 || "Unknown Title",
name: record.field_53 || "Unknown Name",
img: record.field_68 || "http://cdn.balkan.app/shared/1.jpg", // Use field_68 for images
email: record.field_66 || "No Email",
phone: record.field_67 || "No Phone",
}));
// Debug: Log processed records to check image mappings
console.log("Processed Records with Images:", newRecords);
OrgChart.templates.olivia.img_0 =
`<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="20" y="-15" width="80" height="80"></image>`;
// Initialize the OrgChart
const chart = new OrgChart(document.getElementById("orgchart"), {
mode: "dark",
template: "olivia",
layout: OrgChart.tree,
mouseScrool: OrgChart.action.scroll,
collapse: { level: 1 },
toolbar: {
fullScreen: true,
zoom: true,
fit: true,
expandAll: false,
},
nodeBinding: {
field_0: "name",
field_1: "title",
field_2: "phone",
field_3: "email",
img_0: "img" // Bind img_0 to the img field
},
nodes: newRecords, // Pass processed records to the OrgChart
});
} catch (error) {
// Catch and log any errors during rendering
console.error(“Error rendering the OrgChart:”, error);
}
});