I’m intending to use next/image to optimize the images on my site. However, after building the project, all of my images are getting a style attribute with what seems to be reset styling.
I’m new to React and Next.js and I can't seem to find anyone with the same problem.
This is my next/image:
<Image src="/images/KontacktPhoto.jpg"
loading="lazy"
id="w-node-c2896189-6d63-ce1c-bac3-f0aee0dcc9c2-e0dcc9be"
alt
className="image-4"
layout="fill"
/>
and this is the image that is rendered in the browser:
<img id=”myPic” src="/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=3840&q=75" decoding="async" class="image-4" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" sizes="100vw" srcset="/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=640&q=75 640w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=750&q=75 750w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=828&q=75 828w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=3840&q=75 3840w">
As you can see next/image has added this style attribute to the image:
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
I understand that this may be a feature of next/image to make the built in 'layout' property work properly. However if I manually remove the style attribute in the browser, the image seems to be displaying correctly.
Is there any way to let next/image know that I don’t want this style attribute?
Related
The image is working just fine. Here is the code
<Image
layout="fixed"
src="/images/example.jpeg"
alt="Example image"
width="140"
height="140"
/>
But, when I run the website on web.dev, I don't get a topscore in Performance.
The main reason is Image elements do not have explicit width and height
I've studied this, and can tell from here https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions
That width and height attributes is needed, which don't appear, using next/image
How do I solve this?
I am facing the same issue - changing layout to responsive did not solve the problem.
It rather looks like the component is missing the rendering of the supporting tags - it should actually be implemented as described in the initial lighthouse link.
Use curly braces to mention the size instead of string literals.
Use layout="responsive"
<Image
layout="responsive"
src="/images/example.jpeg"
alt="Example image"
width={140}
height={140}
/>
I'm familiar with using breakpoints to change my styling for height, width, font-size, and so on, but I'm having trouble finding examples of changing an image based on my screen size.
Specifically I want to replace the image with a new image depending on screen size. My assumption is that I want the image set up as its own component to start...
import React from "react";
export default function ResponsiveLogo() {
return(
<div>
<img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder"
alt="logo placeholder"/>
</div>
)
}
I believe that I'm supposed to handle this using useMediaQuery but am unsure of the syntax. As I haven't used useMediaQuery before I'm looking for one example of doing this at one breakpoint so I know how to proceed.
as an example lets assume we want to change images for any screen smaller than Material-UI's "sm" breakpoint (600px), and we want to swap in this image: "https://dummyimage.com/200x200/4169e1/fff.png&text=Logo+Placeholder"
Thanks for any direction!
I found an easy way to do this on MUIv5 using MUI components, but you have to use the MUI Box component for the image element so you can access the sx prop. (They use Box for image examples in the official docs so I think it's recommended anyway)
The idea being, instead of setting the image source with the 'src' attribute, you set it via the 'content' CSS property within the sx prop. This way you can easily access MUI theme breakpoints when setting the image url:
import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";
<Box
component="img"
sx={{
content: {
xs: `url(${SmallLogo})`, //img src from xs up to md
md: `url(${BigLogo})`, //img src from md and up
}
}}
alt="Logo"
/>
There are several ways to accomplish this. If your image was a background for example you could change it the same way you use a CSS breakpoint to change any other CSS attribute.
However, since you're using an image element in the HTML, you can either watch for window size changes in javascript or use an HTML solution.
Option #1 Javascript:
window.onresize = function(){
if(window.width > 600){
// do something like change img src path
}
}
There are a lot of pitfalls to this approach. It can destroy performance if it's not implemented correctly and you need to figure out the sizing of the correct elements in JS.
Option #2 srcset or picture element and srcset
This is a way to build responsive images directly in HTML that allows multiple file paths for an image. An image on its own with srcset is a bit complicated (explained better in the link) so I prefer a <picture> element.
Inside your React component you would have something like this:
<picture>
<source media="(max-width: 400px)" srcset="mypic.jpg" >
<source media="(max-width: 1200px)" srcset="myOtherPic.png">
<img src="fallbackpic.gif" alt="alt text for pic">
</picture>
This is cool in that you can have as many source lines as you want each with a media query style condition. They can even be different file types and you can set each of them dynamically just like you would any other HTML element attribute.
The only catch is that <picture> is an HTML5 element so you need to target a newer browser for this to work.
(sorry for the probable mistakes, I'm not a native english speaker)
I'm trying to work after another developer on a wordpress website. I am triyng desperately to get a fullwidth image to cover 100vh in height too, but whatever I do, I get the div to 100vh, but the image keep the same size. I've tried in the inspector and if I directly apply the style
min-height : 100vh;
it works perfectly but I cannot found anywhere in wordpress to apply this style to the image directly. I even tried via a child selector in the global custom css
#my-image-id img
{
min-height : 100vh;
}
HTML:
<div id="title-image" class="et_pb_module et_pb_fullwidth_image et_pb_fullwidth_image_0">
<img src="PRIVATE.jpg" alt="" title="" srcset="PRIVATE.jpg 3408w, PRIVATE.jpg 300w, PRIVATE.jpg 768w, PRIVATE.jpg 1024w, PRIVATE.jpg 1080w" sizes="(max-width: 3408px) 100vw, 3408px">
</div>
or in the custom css of the element, it's like wordpress just cannot read it, the property isn't even present in the inspector (not even striked). (And I tried to add an "!important" despite everything, it changed nothing)
Thank you already !
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
I've been doing a little hacking with wordpress ..via the editor.
I'm placing svg images and I've installed the SVG Support plugin
https://wordpress.org/plugins/svg-support/
When I insert a regular image (a png file) the code looks like this:
<img class="alignnone wp-image-146 size-medium"
src="mydomain/2-300x246.png" alt="2" width="300" height="246" />
and then the theme I'm using scales it as the browser scales up and down, which is what I desire with the svg image.
When I insert an SVG file, it does not show up until I modify the code by taking out the first class tag and add a new class tag:
class="style-svg"
like this..
<img class="style-svg"
src="mydomain/convo_and_notes2.svg" alt="convo_and_notes" width="1" height="1" />
Maybe I need to use a different wordpress theme or modify the one I'm using.. but first I want to know is it possible to get the same responsive behavior from an SVG file (I'm guessing it is ...but how?)
The wordpress theme I'm using is Flat by YoArts if that's helpful information.
Sorry if this is not the right way to phrase this question.. I'm not sure what I'm doing so it's hard to know what to ask.
In a nutshell, I want the SVG files to behave like the bitmaps and would love some advice on how to do that.
The wordpress uploader adds
height="1" wudth="1"
remove that and add
width="300px"
or something like that.
also to keep the responsive behavior don't remove the
class=""alignnone wp-image-146 size-medium"
that's it. The height and width were causing the problem.