Front-end developers often benefit from the online placeholder assets services for fetching dummy images and videos. This allows fast testing without spending time downloading images and videos.

You can find many dummy images services listed on this site.

I found ImgSrc can make your testing or development be more like real components.

With well quality of images and videos, you can do them to something like: resize, fetch specific image&video and auto-resize images.

There are two methods to fetch the assets.

Fetch dummy images and videos by using their Javascript library

Just add the Javascript library script tag inside the <head> tag.

<!DOCTYPE html>
<html>
    <head>
    	<script src="https://cdn.jsdelivr.net/gh/imgsrc-space/imgsrc.space-js-library/main.js" > </script>
    </head>
<body>
<!-- Body tags -->
</body>
</html>

Now on your src of your image tag, you can just add ". cat" to fetch the cat image as well as for the video.

Fetch dummy images and videos by using their Direct URL

This method is much more straightforward. Adding the URL and parameter to the src attribute is the only thing you need to do.

For image, you can just:

<img src=". cat?h-500" />

As well as for the video:

<video width="400" controls>
    <source src="https://imgsrc.space/car-v" type="video/mp4">
    Your browser does nt support HTML video.
</video>

Share

Let me know your thought or you find a mistake/outdated content for this post.

Get the latest update of tutorials, inspirations and useful resources for website design and development to your email box