I wrote inline styling on img tag. But it is not working in a mobile browser.
<img
ref={...}
loading="lazy"
className="rounded mx-auto d-block"
src={...}
alt="..."
style={{
width: '100px',
padding: '20px',
objectFit: 'contain',
}}></img>
for debugging when I open the developer tool, I couldn't find my styling there. which is not for only this image all images have the same problem. where I am using inline styling.
<img loading="lazy" class="rounded mx-auto d-block" src="..." alt="...">
this is what looks like, styling disappeared from img tag.
Also, I am getting this error in the production project only, in development is it working fine.
What I have tried
update <meta tag>
I am not using any media query I make sure
it's inline styling so it should have more important than another styling like external CSS files.
I clear my cache and try to run in incognito but same error.
It is a very simple mistake. Your inline css style syntax is just invalid style={{ width: '100px', padding: '20px', objectFit: 'contain', }}. You can't use curly braces in style property. It's just colons and quotes. The right syntax is style="width: 100px; padding: 20px; object-fit: contain".
Related
I am trying to make a bootstrap carousel in a react project and the carousel keeps jumping between images. I believe the reason for this is because the images are big, and I am just resizing them to have them fit nicely in the carousel. It only happens once which is I believe it is due to the resizing since they would have been resized once it loads the first time. I have also tried commenting out the resizing and see how the images load and while they are giant, they do smoothly transition between each other.
I have tried using the bootstrap class "img-fluid". And have also tried writing my own CSS to resize it how I want. Neither have worked for me though.
React code:
<Carousel className={classes.carousel}>
<Carousel.Item>
<img
src={image1}
alt="image1"
className="img-fluid"
/>
</Carousel.Item>
<Carousel.Item>
<img
src={image2}
alt="image2"
className="img-fluid"
/>
</Carousel.Item>
<Carousel.Item>
<img
src={iamge3}
alt="image3"
className="img-fluid"
/>
</Carousel.Item>
</Carousel>
CSS code:
.carousel {
max-width: 60%;
height: auto;
margin: 0 auto;
}
.carousel img {
max-width: 100%;
height: auto;
border-radius: 6%;
}
If anyone has any ideas for a workaround this or if this is not actually what's happening I would appreciate that.
I'd like to align some text with a logo on the same line:
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<Link href="" target="_blank">
<img
src={img}
loading="lazy"
width="40px"
height="40px"
alt=""
/>
</Link>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
<strong> 75 </strong>
</div>
</div>
But when I try to run it, I receive these errors:
Line 61:41: Style prop value must be an object react/style-prop-object
Line 62:41: Style prop value must be an object react/style-prop-object
Line 73:41: Style prop value must be an object
In react you need to use in style in object,
https://reactjs.org/docs/dom-elements.html#style
style={{
whiteSpace:'nowrap',
display:'inline',
}}
style prop takes an object.
Full code:
<div id="container" style={{ whiteSpace: "nowrap" }}>
<div id="image" style={{ display: "inline" }}>
<Link href="" target="_blank">
<img src={img} loading="lazy" style={{ width: "40px", height: "40px" }} alt="" />
</Link>
</div>
<div id="texts" style={{ display: "inline", whiteSpace: "nowrap" }}>
<strong> 75 </strong>
</div>
</div>
CodeSandbox Demo
Before we can answer the question you ask in the title of this post, you have to fix your inline styles, hence the error you receive from React. The answer to your question using CSS will be at the bottom of the post.
When using inline styles in React, you will need to create an object. An object is the use of key, value pairs. So, using the code given in your example, style="display:inline;" is not an object, and thus will not work as you have seen. To make this inline style work, you will need to do one of the following.
Create an object within the JSX
This method can get messy, so if you are planning to write all your styles as inline styles, I suggest using method 2.
To do this, you can follow #RiTeSh 's example. You will need to create an object and pass that to the element's style prop, WHICH CANNOT BE A STRING, as you can see from the errors you are getting. You can do the following:
// Notice how the value is the only string in the object.
style={{
whiteSpace:'nowrap',
display:'inline',
}}
And to see what this would look like when used in an element:
<div style={{whiteSpace:'nowrap', display:'inline'}} >
Hello World
</div>
Store the styles in a variable
Compared to method 1, this is a much cleaner way to add inline styles as it doesn't create a jumbled mess in your render() function.
Before you reach the render() function, create an object and store it in a variable like the one below.
const styleObject = {
whiteSpace:'nowrap',
display:'inline',
};
return (
// Your JSX here
);
And when you apply the styleObject to the JSX element, it should look like the following:
return(
<div style={styleObject} >
Hello World
</div>
);
Make img and text appear on the same line
This is quite a simple answer if you use the display: flex property on the wrapper element, which, in your case, is the div with an id of container. Here is a simple read about flexbox from W3 Schools
With inline styles on the container element:
style={{display: 'flex'}}
With CSS:
#container {
display: flex;
}
i'm new to ReactJs and my question may seem stupid to many of you, but i have a problem with setting the background. My React code is:
<header className="masthead ttt">
<div className="overlay"></div>
<div className="container">
<div className="row">
<div className="col-lg-8 col-md-10 mx-auto">
<div className="site-heading">
<h1>Blog Name</h1>
<span className="subheading">blablablablabla</span>
</div>
</div>
</div>
</div>
</header>
So basically i'm trying to set an image as background in my header , so i created a class .ttt and modified it to my css that way :
.ttt{
background-image: url("../img/home-bg.jpg");
}
And finally here's the way the folders are set :
Am i doing anything wrong in my code ? Or there's another way of doing things in ReactJS!
Thanks!
So far what I understood from your problem is that you are not getting the image on the front-end. While checking it through developer options it must be pointing you to a blank div at the top of the screen.
If that's the case then it is because that every background image needs some size to be displayed.
You can either give width and height or you can give background-size property as follows:
.ttt{
background-image: url("../img/home-bg.jpg");
width: 100%;
height: 100%; // giving height is not compulsary but just for good practice.
}
OR
.ttt{
background-image: url("../img/home-bg.jpg");
background-size: 100% 100%; // First value: {Width} Second value: {Height}
}
This would resolve your issue.
Use inline css in javascript like this:
import Background from '../img/home-bg.jpg'; // make sure path is correct
<header className="masthead" style={{ backgroundImage: `url(${Background})` }} >
ref Be mindful of using backgroundImage instead of background-image
Working for me
<div className="drag-dashboard" style={{ backgroundImage: `url(${config.DESTINATION_MEDIA_CDN+ "assets/icons_skining/upload_placeholder_skining.png"})`}}>
</div>
This is Wordpress-related question, but since desired solution is purely CSS-related, I posted it in here, not at wordpress.stackexchange.com.
In my current style, if image has no following caption, it is placed using HTML code like that:
<p>
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="aligncenter size-medium wp-image-55">
</a>
</p>
In my current style, it is styled like that:
img {
display: block;
padding: 5px;
background-color: #eee;
border: 1px solid #ddd;
}
Which draws simple border around it.
If there is a caption following image, entire HTML in this part is a little bit more complex:
<div id="attachment_55" class="wp-caption aligncenter" style="width: 310px">
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="size-medium wp-image-55">
</a>
<p class="wp-caption-text">Caption</p>
</div>
Currently caption is not styled at all (as per my currently selected theme).
What I would like to achieve is to have entire div styled (image and caption), if there is any caption. If I'm not mistaken, that would require to style img (as currently) only, if it is not followed by <p class="wp-caption-text">. If it is, then img should not be styled at all and it second-in-row parent (<div class="wp-caption">) should be styled instead.
That's all for the algorithm. But how to code this in CSS (and whether it is possible at all) -- I don't know.
The simpliest solution would be to never style img and always style <div class="wp-caption"> instead, no matter if there is caption following image or not. But the problem is, that Wordpress is adding that div only, if there is a caption. So styling only it, would result in no border at all, if there is only image.
if you can use Jquery.
you can manipulate the markup then. if the pattern of your img and img with caption is going to be like that, you can do this.
$('img').each(function(){
if($(this).parent().parent().hasClass("wp-caption")){
$(this).parent().parent().addClass('img');
}
});
am sure this code can be optimized even better, but it should give you an idea.
see this fiddle
I have a block of html that I want to act as a clickable link. In the block of code below, I would like to make the whole div into a link.
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
HTML5 permits surrounding the html in an anchor tag (I think). See below
<a href="goThere.html">
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
</a>
However, this seems wrong to me. How will software such as screen readers describe the link.
I also considered the following CSS trick. I altered the HTML to be
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
and then used CSS to style the link to cover the whole of the div. See below:
#clickableLink {
position: relative;
width: 100px;
height: 200px;
z-index: 0;
}
h3 {
z-index: 0;
}
img {
z-index: 0;
}
a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
z-index: 1;
}
This works perfectly in all browsers apart from IE. Does anyone else have any suggestions?
Your first approach is actually the best. To describe your link, you should use the a element's attributes such as title, alt and possibly any WAI-ARIA markup you wanted to employ. This is good industry practice anyway and allows you to wrap content in an a tag without worrying about accessibility.
The thing that will allow older browsers to render it properly (and to make sure it validates) is to use inherently inline elements inside an inline element. In other words, block level elements can not be placed inside inline ones (according to the HTML, not the values that CSS may give the element). You can then use CSS to make a span act like it is block level. So the markup could easily be:
<a href="goThere.html">
<span id="clickableLink">
<span class="headerthree">Link Heading</span>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</span>
</a>
If you declare that the A is block level, then you wouldn't even need the span. Problem here is that you lose the SEO of using Header elements. So...
The best thing is probably to leave it specced for HTML5 as you have it above, even though it seems wrong. To help SEO and screen readers, use a title tag to "describe" the anchor. The code will validate just fine. Then, make sure your A is display: block, and I think older browsers will render it ok, too.