News Articles image

WebP images — A next generation format

WebP images — A next generation format Photo by Designecologist from Pexels What is a WebP file? WebP files are images with the file extension “.webp”. Looking at Wikipedia’s definition: WebP is an image format employing both lossy and lossless compression, along with animation and alpha transparency. Developed by Google, it is designed to create smaller or better-looking images […]

When parts of an image are added, some parts do not? [closed]

<script type="text/javascript"> window.onload = function() { var canvas=document.getElementById(‘canvas’); var ctx=canvas.getContext(‘2d’); canvas.width=3000; canvas.height=3000; var robothead = new Image(); robothead.crossOrigin = "anonymous"; var robotheadnum = Math.floor(Math.random()*3)+1; var robotheadname= "head"+robotheadnum+".png"; robothead.src=robotheadname; ctx.drawImage(robothead,((3000-robothead.width)/2),50); var robotbody= new Image(); robotbody.crossOrigin = "anonymous"; var robotBodynum = Math.floor(Math.random()*3)+1; console.log(robotBodynum); var robotBodyName= "body"+robotBodynum+".png"; robotbody.src=robotBodyName; ctx.drawImage(robotbody,((3000-robotbody.width)/2),50); var robotLeg= new Image(); robotLeg.crossOrigin = "anonymous"; var robotLegnum […]

Vue display an image from firebase cloud storage blob

Im building a product lookup repository, users will scan a product barcode which will then return data about the product and a picture of the product to be displayed. Right now for testing purposes I have set up a firebase storage bucket, with one image uploaded. Im have successfully been able to retrieve the image […]

how can we pass image directly to a background image in css

as im having a variable that holds the image, i need to add the image instead of URL in css background image tag, so how to achieve this? My code now: .devicewidth{ background:url("image url")} @media only screen and (max-width: 400px) { table[class=devicewidth] { width: 420px!important; } img[class=banner] { width: 400px!important; height: 80px!important; } } my […]

How to resize image into a header

Current Navbar Hi, I want to resize my image into the header, which is shown by the salmon background in the attached picture. For some reason, it doesn’t fit but expands beyond it. I’m attaching the code below. body{ background-color: bisque; } .header{ background-color: salmon; } .header img { float: left; width: 100px; height: 100px; […]

Background image doesn’t cover when scrolling down page and new content is added

I’m creating a simple To Do list that allows user to add and remove items. Everything works exactly how I want it to….EXCEPT…. my background images on two main columns no longer appear when user adds enough items to cause page to start scrolling. I though background-image repeat would work, but it doesn’t. HTML —————————————————————————- […]

How to begin creating a custom interactive map that is not of the Earth or Google Maps

I want to create an interactive map for a mobile app using a cartoon image of a university campus. I do not want to use Google Maps, or any Earth map library because they provide existing maps of the Earth. I want to use the image I am providing as the base map. I need […]

How to add an image in Storybook within a component

I am trying to add a logo image (svg) to my nav component. I am using Storybook and next.js. I followed the config from Storybook, but the image does not load in the storybook component. Why is this? // .storybook/main.js module.exports = { stories: [], addons: [], staticDirs: [‘../public/images’], }; // Nav.stories.mdx import {Nav} from […]

Color difference in firefox vs chrome?

so I know this question has been asked here before, but applying the fixes there didn’t work for me (changing force-color-profile to sRGB in chrome). I have my personal website here, and I guess I never checked it on firefox, which is now my default browser, but in firefox it renders the background photo’s bg […]

Loading multiple small images with JavaScript

I’m working on a GBA Pokemon Fire Red "clone" made with JavaScript, I’m planning on using original assets. The maps are made out of 16x16px blocks (left) which are made out of four 8x8px tiles (right) so loading a map will result in a lot of images being loaded. As I’m using Vue I want […]

Trouble while using .svg file in React.js code

I am trying to use illustration in my react project ( [illustration image which I trying to use in my code I choose SVG and CSS I got long coded .svg file, Can anyone help me, how can I use that file of SVG in my react code .svg file which I trying to […]

CSS transition on huge image is not smooth

I have a huge 16000×20800 .png image which I am rendering in the browser. The image has been constructed in the backend by thousands of smaller images. I’m waiting for the image to load before I start manipulating its CSS. I then transition its opacity from 0 to 1. When I do that, the transition […]

img not displaying (img src file path wrong?) [duplicate]

this is my header.js <div className="navbar"> <header> <div> <img src="../Images/coatHanger.svg" alt="coatHanger" /> <h1>E-commerce</h1> </div> <div> <ul className="nav-items"> <li>Products</li> <li>Home</li> <li>About</li> </ul> </div> </header> </div> this is my file structure src |Components ||Header.js |Images ||coatHanger.svg |App.js |Index.js this is the css for the img img[alt="coatHanger"] { width: 100px; height: 100px; } I have tried "./Images/coatHanger.svg" and […]

I already input the alt props but compiler said give me your alt props

const bannerStyle = { backgroundSize: "cover", backgroundImage:`url(‘${}’)`, backgroundPosition: "center center" } return ( <> < div className = "Banner-contents" style = {bannerStyle}> enter image description here I thought ‘backgroundImage’ is the img alt but is not? I trying to edit +alt” but this is not how to solve this matters. Source: React – Stack Overflow

The css applied to an image is not working

I made a typo lol this can be closed now, thank you to all of the people that helped me find this, much appreciation! This question just shows that if something doesn’t seem right, look for a typo. Source: CSS – Stack Overflow

trying to show image and text when you hover over a graphical element

I’m trying to show the image, but its not showing and there should be text with the image. I think I need to add some sort of sizing to the image, but still unsure. The graphic is currently just a square but it’ll be a dot on a timeline showing significant events, so when hovering […]

Javascript downloaded png file is damaged

I’m trying to download a div as an image via a download button that generates a link to a png file, and I can, but the downloaded file cannot be opened because "It may be damaged or use a file format that Preview doesn’t recognize." Here’s the minimal version of the html file: <!DOCTYPE html> […]

Where to store images in a flask vue application?

Iam building a vuejs app which consumes a flask restful API. The Fronted is completely separated from the backend. How do I manage profiles images that the user can upload? For me there are several methods, but I can not judge which is the most efficient. #1 Encode/Decode the Image and Store it to the […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.