Page 1 of 1
Display images on the Edit form using URL's in the db
Posted: Fri Oct 10, 2025 10:07 pm
by Paul
I have image url's that are stored in the database as 'image_url' for each record (these are unique, separate images and separate urls).
Those images reside on my local nubuilder site.
example:
Code: Select all
http://localhost/nuBuilder2/Uploads/Case%2012/Evidence/Photo/d_150_5.jpg
These URLS are entered on the Edit form in a separate field.
I want to retrieve the url from the database for the currrent record (#RECORD_ID#) and embed that url into html code so that the image is displayed on the Edit form. Each image for each record is
unique.
How would I do that?
Re: Display images on a form using URL's in the db
Posted: Sat Oct 11, 2025 4:18 am
by kev1n
1. Output an additional column like:
browse_columns.png
Display:
CONCAT('<img src="', image_url, '" class="record-image">')
Title: Space character
2. In Custom Code -> Style add your style like:
Code: Select all
.record-image {
display: block;
max-width: 100%;
height: auto;
border: 1px solid #ccc;
border-radius: 8px;
object-fit: contain;
}
3. Change the "Row Height" to e.g. 100
Re: Display images on the Edit form using URL's in the db
Posted: Sat Oct 11, 2025 4:42 am
by Paul
Not sure if you understood the goal. I edited the title of the original post. My apologies if that was not clear.
IMAGE.PNG
Re: Display images on the Edit form using URL's in the db
Posted: Sat Oct 11, 2025 7:17 am
by kev1n
Use a html object and display the image in there.
You can use nuBuilder's Prompt Generator to create a prompt like this and ask AI:
Code: Select all
Generate code snippets and explanations following nuBuilder conventions. Use the information below when relevant to the prompt. This context is provided to help understand requirements for generating code snippets and answering questions.
## User Input/Question:
I have a URL stored in a nuBuilder field that points to an image. I want to display this image inside a nuBuilder HTML object.
## Languages & Technologies - Use nuBuilder JavaScript functions: [Wiki](https://wiki.nubuilder.cloud/index.php?title=Javascript) | [nucommon.js](https://raw.githubusercontent.com/nuBuilder/nuBuilder/refs/heads/master/core/nucommon.js) | [nuform.js](https://raw.githubusercontent.com/nuBuilder/nuBuilder/refs/heads/master/core/nuform.js) - Technology: jQuery
Re: Display images on the Edit form using URL's in the db
Posted: Sat Oct 11, 2025 10:49 am
by Paul
ChatGPT gave me this:
Code: Select all
// Replace 'yourImageField' with the actual field name that holds the image URL
var imageUrl = nuGetValue('moonimageurl');
// Optional: if the field might be empty, handle that
if (imageUrl && imageUrl.trim() !== '') {
var html = '<img src="' + imageUrl + '" style="max-width:100%; height:auto; border-radius:8px;" />';
} else {
var html = '<p style="color:gray; text-align:center;">No image available</p>';
}
// Replace 'HTML_ImageDisplay' with your HTML object name
nuSetValue('moonimagehtml', html);
I placed it in the js >> Edit tab but it does nothing.
Re: Display images on the Edit form using URL's in the db
Posted: Sat Oct 11, 2025 11:12 am
by kev1n
The content must be set as html. Pass 'html' as 3rd parameter to nuSetValue()