How to use random image url for testing with code example

In this tutorial, I show you how you can find the random images for testing. Something when you are working on some functionality and you need a random image URL for testing so it is good to use the internet images instead of using from a local machine.

 

 

When you required a random image URL for testing

Below are some scenarios when you required a random image URL for testing –

 

1. You are working on some code where an image is required to immediately test the functionality.
2. Need to test the different image sizes quickly.
3. If you don’t want to add the images locally.

 

Random image URL for testing with Code Example

 

Below are some sample image URLs for testing that you can use these are non-copyrighted and free to use.

 

Example 1 –

 

Below is the image URL you can use just copy it and paste it into your browser window to check whether it’s loading fine to not.

https://source.unsplash.com/user/c_v_r

This image has a standard size if you need any particular dimensions kindly give the size at the end of the image URL like below –

 

https://source.unsplash.com/user/c_v_r/500x300

Here 500 is the width of the image and 300 is the image height. Feel free to change the same according to your requirement –

 

Likewise, you change the image whatever you want.

 

Image URL size for testing example –

 

Change the size at the end of the URL and you’ll get an image required image for testing  –

 

https://source.unsplash.com/user/c_v_r/50x20

https://source.unsplash.com/user/c_v_r/100x100 (Square Image)

 

Example 2 –

 

There are other sites as well from where you can get random images –

 

https://picsum.photos/200/300

Directly use the same in the <img> tag in your code and check the rendering –

 

<img src="https://picsum.photos/200/300" alt ="Random image url for testing" />

 

Example 3 –

 

Image URL for testing code example –

const [imageStatus, setImageStatus] = useState("");
const handleImageLoaded = () => {
setImageStatus(true)
}

const handleImageErrored = () => {
setImageStatus(false)
imageUrl = "https://picsum.photos/400/300"
}

Random image URL generator

Generate random images Change the dimensions to what you need (300/150) and add to a random counter as needed.

 

Suppose you have to render 50 random images for testing then use the below code to loop 50 times and generate a unique 50 image URL –

 

var getHTML;
for(var i=1; i<=50;i++){
  var imageURL = "https://picsum.photos/300/150?random=" + i
  getHTML += '<div><img src="'+ imageURL +'"  alt ="Random image url for testing" /></div>';
}
console.log(getHTML);
document.body.innerHTML = getHTML;

The code added the 50 images in the HTML body.

 

Conclusion

 

This is how you use random image URLs for testing, I have shown you a few examples with random image URLs. Kindly use the same for testing only because it might slow your code and sometimes it gives a 404 because the publisher may remove or change the image path.

 

I hope to know you have some idea of how to use random image URLs for testing.