When doing the page, often need to find a picture on top or test ~ casually find a map size may not meet their requirements, on the page ugly.

So this week I recommend a very useful image placeholder widget

If three pictures are used as placeholders, not only the size is clearly marked, but also the background color and text color can be adjusted. Even the same Demo page can be beautiful ~

I’m sure you’ve already turned on the debugger to see the image URL. Simply add the size and color of the image to the url of Placehold. it to quickly generate a beautiful placeholder image.

Like this: < img SRC = "http://placehold.it/400x150/ff3333/ffffff" > < img SRC = "http://placehold.it/700x200/ffde00/000000? text=This+is+a+picture">Copy the code

Currently, the following parameters are supported:

1. Image size (must be the first parameter), add widthxheight after the URL. Such as

<img src="http://placehold.it/700x200/">  
Copy the code

2. The image background color and text color (must be immediately followed by the image size parameter), add background-color/text-color after the URL. Use hexadecimal notation, you don’t need to write #. Such as black background white text

<img src="http://placehold.it/700x200/000000/ffffff">  
Copy the code

3. The image type can be placed after any parameter. The default image format is GIF. Such as

<img src="http://placehold.it/700x200/000000.jpg/ffffff">  
Copy the code

4. The text displayed on the picture (must be written at the end of the URL), add? Text = Demo. Spaces can be represented by +. Such as

<img src="http://placehold.it/700x200/000000.jpg/ffffff?text=Demo+text">  
Copy the code

However,, this handy little tool also has a drawback, is the occasional wall.

Finally, release the link to placehold.it/ and start playing