Retrieving Script Images

When working with the Rscripts API, you may encounter situations where you need to display images associated with scripts. The API provides two fields related to script images: image and gameThumbnail.

Custom Thumbnail

If the creator of a script has uploaded a custom thumbnail, the image field will contain the filename of the image. To retrieve the custom thumbnail image, you need to append the filename to the following URL:

https://s3.rscripts.net/images_scripts/${filename}

Here's an example of how to construct the URL and fetch the custom thumbnail image:

const scriptObject = {
 // ...
 image: 'custom-thumbnail.png',
 // ...
};
 
if (scriptObject.image) {
 const imageUrl = `https://s3.rscripts.net/images_scripts/${scriptObject.image}`;
 
 fetch(imageUrl)
   .then(response => response.blob())
   .then(blob => {
     // Create a URL for the blob
     const imageSrc = URL.createObjectURL(blob);
 
     // Create an image element and set the source
     const imageElement = document.createElement('img');
     imageElement.src = imageSrc;
 
     // Append the image element to the desired location in your UI
     const imageContainer = document.getElementById('image-container');
     imageContainer.appendChild(imageElement);
   })
   .catch(error => {
     console.error('Error fetching custom thumbnail:', error);
   });
}

In this example, we first check if the image field exists in the scriptObject. If it does, we construct the image URL by appending the filename to the S3 object storage URL. We then use the fetch function to retrieve the image data as a blob.

Once we have the blob, we create a URL for it using URL.createObjectURL(blob). This URL can be used as the source for an <img> element, which we create and append to the desired location in our UI.

Game Thumbnail

If the creator did not upload a custom thumbnail, the gameThumbnail field will contain a URL pointing to the default thumbnail image for the game associated with the script. In this case, you can use the URL directly without any additional processing.

const scriptObject = {
  // ...
  gameThumbnail: 'https://example.com/game-thumbnail.png',
  // ...
};
 
if (scriptObject.gameThumbnail) {
  const imageElement = document.createElement('img');
  imageElement.src = scriptObject.gameThumbnail;
 
  // Append the image element to the desired location in your UI
  const imageContainer = document.getElementById('image-container');
  imageContainer.appendChild(imageElement);
}

In this example, we simply create an <img> element and set its src attribute to the value of the gameThumbnail field. Then, we append the image element to the desired location in our UI.

Best Practices

When working with script images, it's recommended to follow these best practices:

1. Always handle the case where neither image nor gameThumbnail is available, and provide a fallback or placeholder image.
2. Implement error handling for failed image fetches or invalid URLs.
3. Consider lazy loading or optimizing image sizes for better performance, especially when dealing with a large number of scripts. By following these guidelines, you can effectively retrieve and display script images in your application while ensuring a smooth user experience and adhering to best practices.