I wish you had a good day till now,
I have a json file in my project which contains the name of the images that I want to be the background of my divs. The Problem is I can't go trough the name with function when i use tailwindcss (I mean in the className I can't put function to put the name in the url one by one) because I use this way:
<div className="bg-[url('./asset/image/1.jpg')] " >
I Also tried the style way but in this way the image won't show up (I have no Idea why):
<div style={{ backgroundImage: `url('${value.background}')` }} />
I would appreciate your help :)
Related
Hi my app running good at localhost but when I create build then Background image not displaying.
my code is.
<div style={{ backgroundImage:"url("+require("assets/img/bg.jpg")+")", height: "400px",
backgroundSize: "cover",
backgroundPosition: "center top"}}>
Result at localhost as below
But at live server empty header with path
When I inspect this path then showing like this.
background-image: url(./static/media/bg6.488bc24….jpg);
Please help with thanks
You can try importing the image outside of the function instead of requiring it.
PS:- You can kindly attach a SS of your build folder for further info.
Perhaps, upon build, programmatically defined path is being changed or appoints to an undesired resource.
You could try to modify your DOM and apply css, by adding a dedicated tag, like so:
<img
id="background-image"
src="./assets/img/bg.jpg"
alt="background-image"
/>
Put your file to public folder and replace require with string with path.
For example put file to public/assets/img/bg.jpg
And change path:
{
backgroundImage: "url(/assets/img/bg.jpg)"
...
}
or you can use import and put imported image to img (src prop).
Could you tell me the way to do something like this in tailwindcss:
first[&>.a-child-class]:text-5xl
I'm trying to style the first element by the way passing classes when it's rendering,I want to change its child's style, but the code above did not work.
I tried to put that classes inside component by default, but I realized, the component need to reusable, so that it is not reasonable.
please help meeeee.
thank you so much, have nice day.
In tailwind 3.1, arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind. You can see the document here. You are missing : after first.
Example:
<div className="first:[&>.a-child-class]:text-5xl">
<p className="a-child-class">first</p>
<p className="a-child-class">second</p>
<p className="a-child-class">third</p>
<p className="a-child-class">forth</p>
</div>
Tailwind Play demo
In my system I have a few images that a user can have presented and it's extremely advantageous to me to be able to just pass in an id and then have that image be presented to the user.
(One use case: Articles in the system have images associated with them, there are many articles in the system, it'd be ideal to pull out just the image-id and have the image dynamically displayed based upon that id. There is no realistic possible way I can statically give an image path for each article.)
Unfortunately I've tried to figure this out and haven't gotten far at all. I'd be super-duper appreciative of a "Explain it to me like I am 5" answer on this one.
I have been trying to use images in two different ways and both have unfortunately not worked at all for me. Where unfortunately I am going to need both to continue :(
1: Putting it as a background of a div. [I am using it as a carousel with overlaying text here.]
2: Putting it as just a standalone image. [This is going to make up the 95%+ case of image use through the webapp.]
I'd love to in a perfect world just pass in an object like this to props.
articleDetails = {
articleId: 38387,
articleTitle: "Magical Unicorn Article"
articleContent: "I am not that creative, but here is some content."
}
<IndividualArticle article={articleDetails}/>
Then for props to take this in and convert it into the image path to my local files.
templateStringForImage = `../../../../articleImages/${this.props.article.articleId}.png`
Then for this template string to be used as:
1: the background image of a div
<div
className="container"
style={{
backgroundImage: `url(${templateStringForImage})` ,
height: "576px"
}}
enter code here
</div>
2: standalone image
<Image
src={require({templateStringForImage})}
/>
Some of the things I've tried:
I've tried a few changes like changing the code around to be like:
var Background = `../../../images/articleImages/${
this.props.article.image
}`;
<div style={{
backgroundImage: url('../../../images/articleImages/article3Image.png'),
height: "576px"
}}
But unfortunately that only gave me these errors.
Line 32: 'url' is not defined no-undef
Also when I went to try and use the new Background object like this I got a different error
var Background = `../../../images/articleImages/${
this.props.article.image
}`;
<Image
src={require({Background})}
/>
The error was:
Error: Cannot find module '[object Object]'
My current system/errors:
-I have a bunch of images like article1Image.png, article2Image.png, article3Image.png specified in the src code in an image folder.
-I want to pass "article1Image.png" into the object directly and have an image produced.
-I tried to do something like this and it has consistently failed, I don't even get an error message when I attempt to use it as a backgroundImage on a div unfortunately... it's literally just blank space on my screen. No broken image icon, just a void.
var Background = `'../../../images/articleImages/${
this.props.article.image
}'`;
<div
style={{
backgroundImage: `url(${Background})`,
height: "576px"
}}
-When attempting to use semantic-ui's Image I am also running into a nasty error
<Image
src={require(Background)}
/>
Error:
Error: Cannot find module ''../../../images/articleImages/article2Image.png''
Yet shockingly enough THIS works, when I give it as a static string like this.
<Image
src={require('../../../images/articleImages/article2Image.png')}
/>
But even when I give the string path directly into the backgroundImage of the div it still appears empty...
<div
style={{
backgroundImage: `url(../../../images/articleImages/article3Image.png)`,
height: "576px"
}}
Thanks all I truly appreciate the help lots and lots!
There are 2 different solutions based on what you have tried.
URL
If you want to access them via style={{ backgroundImage: 'url(...)' }}, the url will need to be accessible from the front-end. If you used create-react-app, that would mean placing images in the public folder instead of the src folder.
So if you had images in the public folder like: /public/articleImages/article2Image.png, you could use the url style attribute:
const imageName = 'article2Image.png';
<div style={{ backgroundImage: `url('/articleImages/${imageName}')` }}>
...
</div>
<img src={`/articleImages/${imageName}`} />
If you aren't using create-react-app config, then you will need to make the images available via however you are serving your application (i.e. express).
Require
This one is a little tricky, and I'm not 100% why it doesn't work out of the box.
What I had to do when testing this was to require all of my images at the top of the file, hard-coded, and then I was able to use the require(stringTemplate) just fine. But I was getting a Error: fileName hasn't been transpiled yet., so I'm not sure if the same fix will work for you.
It basically looks like this:
require('../../../images/articleImages/article1Image.png');
require('../../../images/articleImages/article2Image.png');
...
// This code would be inside a component
const imageName = 'article2Image.png';
const filePath = '../../../images/articleImages/${imageName}';
const fileUrl = require(filePath);
<div style={{ backgroundImage: `url(${fileUrl})` }}>
...
</div>
<img src={fileUrl} />
Without the require(s) at the top of the file, something goes wrong with transpilation.
My suggestion would be go the static assets route which would allow you to use the URL technique above. require is more suited to static files that don't change often like icons.
Feel free to ask any questions, and I'd be happy to clarify and give more examples.
I am learning react, hence I am new to react though not new to development. I was creating a slider in which the <div> have a background that is to be set using already present images. I think there is mistake somewhere in dynamically allocating the directory of the images although i am not entirely sure.
This is short image of directory
image of directory
I have details of images stored in a const slides in which cover holds the name of image( like cover1.jpg). When I console.log(item.cover) I got the correct names of images, but I can't seem to implement it to correctly represent the directory of images
This is the current code that is written in featured.js
slides.map((item)=>{
return(
<div key={item.id} className="item-slider"
style={{background:'url("../images/covers/'+item.cover+'")'}} >
</div>
)
})
And previously i have tried
style={{background:'url(/images/covers/${item.cover})'}}
and
style={{background:'url("images/covers/${item.cover}")'}}
with many different combos of directory
How can i get the images to show and what am i doing wrong. Any help is well appreciated.
You're not using template literals correctly. You're using ' instead of `.
style={{background:`url(/images/covers/${item.cover})`}}
I don't Know Why! but it worked when i added another nest
slides.map((item)=>{
return(
<div key={item.id}>
<div className="item-slider"
style={{background:'url("../images/covers/'+item.cover+'")'}} >
</div>
</div>
)
})
I am trying to learn React. Why can you not use style inside of a return inside of a component?
The Error:
The style prop expects a mapping from style properties to values,
not a string. For example, style={{marginRight: spacing + 'em'}} when
using JSX. This DOM node was rendered by Home.
<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">
I have also tried this also:
<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>
or
<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>
Any help with this syntax would be greatly appreciated. Other people posted they change style to say styles but that did not seem to work either.
From DOC:
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a
string.
So instead of background-image use backgroundImage.
For example:
padding-top ---> paddingTop
padding-left ---> paddingLeft
margin-right ---> marginRight
...
How to specify the inline style?
We need to pass a object to style attribute which will contains all the values in form of key-value pair.
Like this:
<div
style={{
backgroundImage: 'url(../images/WinterCalling_2016.jpg)',
marginTop: 20}}
>
Update:
We can use template literals to pass a variable inside url, like this:
<div style={{backgroundImage: `url(${image1})`}}>
React follow the camelcase convention so you have to change background-image to backgroundImage instead.
For more info, the documentation is here.
If you want to use the style property, please provide a JavaScript dictionary object. However, the style key for background-image is backgroundImage.
<div
className="single_slide"
style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}}
>
Did you try wrapping background-image in quotes?
i.e.
<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div>
This seems to work for me (at least, when testing with the background-color property; I don't have an image on hand to test with for background-image)
or you can use '!important' with this ....like "background-color:red!important"
Note: And call your js in footer .Because sometimes js reacts first when we call that in header.so call your 'js' in footer.
<div class="yourclass" style="background-color:red;" >your div</div>
style="background-color:red;"