import an Image from WEB

This procedure allows you to download an image from a public website and display it in an Image field:

Usually, I go through the following steps:

1. Image Field

2. text field labelled in this example coverimage

3. a field formula

in the text field for example you can retrieve information from an API request:

https://i.discogs.com/-yeZis2w3l9rFx26F3KOu-oKnkZdPRsNEFjeX5aeriY/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTc5NzE5/MTgtMTUwMzI1NDYx/Mi0zNjE0LmpwZWc.jpeg

and now the field formula:

let xurl := coverimage;
html("<script>
  var currentField;
  var object = document.querySelectorAll('.editor-file-file');
  object.forEach(function (obj) {
    obj.style.backgroundImage = 'url(" +
xurl +
")';
    obj.style.backgroundSize = 'contain';
    obj.style.backgroundPosition = 'center center';
    obj.style.backgroundRepeat = 'no-repeat';
  });
</script>")

This formula defines a variable called xurl, which is assigned the value of coverimage. It then generates an HTML script that uses JavaScript to modify the styling of certain elements in the document. Specifically, it selects all elements with the class name .editor-file-file and sets their backgroundImage property to the value of xurl (which represents the URL of a cover image). It also sets other style properties such as backgroundSize, backgroundPosition, and backgroundRepeat to define how the background image should be displayed.