console.image
v1.0.2
Published
A nice snippet to display images in chrome console
Downloads
88
Maintainers
Readme
console.image
A nice snippet to log images in chrome console 🌈
Why is that ?
This snippet is heavily inspired from Paul Irish talk at Chrome Dev Summit 2016 on November, 10 2016.
He showed all the new stuff coming in Chrome Devtools in the latest version of Chrome (v55). Here is the link.
This is his idea. I've only managed to reproduce his output from what I've seen on his snippet. 😉
Installation
You can use it from npm :
> npm install console.image
then import it into your code :
import 'console.image'
And it will add the .image() method on your console
object in Chrome Devtools.
Otherwise you can copy the code to your Chrome snippets.
Usage
const avatar_url = 'https://avatars3.githubusercontent.com/u/USER_ID'
console.image(avatar_url)
and you get :
Snippet
Here's the code if you want to store it to your Chrome snippets :
function renderImage (url, scale = 0.3) {
let img = new Image()
img.onload = () => {
const style = `
display: block !important;
margin: 10px 0;
font-size: ${img.height * scale}px;
padding: ${Math.floor(img.height * scale/2)}px ${Math.floor(img.width * scale/2)}px;
background: url(${url});
background-size: ${img.width * scale}px ${img.height * scale}px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
`
console.log('%c', style)
}
img.src = url
}
console.image = renderImage