Show fields as images using

Forms
1

I have a list that contains fields that contain URL links to images
I'm currently using those fields in List formatting
however I'd like to replicate the formatting in the Display form.
So if I have a field that contains a URL to a picture file, how can I get that to display as the picture on the form?
Note: each entry has a different URL, so it's has to reference the field contents somehow

2

Dear @Amys_Turtlgal,
You can see I've added URL field, as well as Image and Plain Text controls to my form:

image
image1920×737 49.7 KB

Image control was slightly changed - I've removed General -> Width and Height (don't be afraid if it looks slightly different on the form, I've adjusted it here, so it's clear to see).

Then, I've added the following code to JavaScript editor:

fd.spRendered(function () {
    //hide Hyperlink field
    $(fd.field('URL').$parent.$el).hide();

    //set Image's source from the URL
    fd.control('Image1').source = fd.field('URL').value.url;
    fd.control('Image1').alt = fd.field('URL').value.description;

    //this is what URL opens on click, plus so it opens in new tab:
    fd.control('Image1').href = fd.field('URL').value.url;
    fd.control('Image1').target = '_blank';

    //changing text control to add note based on URL text (not necessary)
    fd.control('Text1').text = fd.field('URL').value.description;
});

Now, it's very important that the URL field actually stores direct link to an image file (it should end with .png/.jpg) - or it wouldn't work. Often you see indirect links to images, which do not contain the actual file and cannot be used on a form. Only direct links would work.

For example, this wouldn't work:
https://imgur.com/ML3F0xk

This would work:
https://i.imgur.com/ML3F0xk.jpg

Here's what the result looks for me:

image
image793×870 105 KB

3

Awesome! Thank you I will try it out!