Display images on the Edit form using URL's in the db

[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?

[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

[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

[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

[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.

[kev1n]

The content must be set as html. Pass 'html' as 3rd parameter to nuSetValue()