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).
Related
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 :)
Here we go again. Let's see if you can decipher the riddle :D. So, the problem is the following. I have an external css file. I putted some 'specs' inside this file. I downloaded a plugin that make possible to link external css files into js files. So, in that way I can 'stylize' the JSX syntax inside that files. Everything ran great, but a problem appeared. If I declare a 'className' inside an element and I try to manipulate the properties of this element, nothing happens. But if I "call" the element by name( example: div {...} or footer{...} ) into the css file , the manipulation happens.
This is the code inside the JSX syntax:
<div className = "userlog_wrapper">.....</div>
..and this is the code inside the css file:
.userlog_wrapper{
width: 100%;
height: 660px;
}
Ok, I fixed it. The solution is the following......if you are using the nextjs plugin for css click on me .You need to write this inside the js file:
import css from ../wherever/the/file/are
and then, next to the className put this '= {css.nameOftheClass}'.
That's all, it should work.
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.
My theme size is not coming 100%.I am having a background which render inside the react app. But when i am running this code, my background is not coming 100% based on the screen size.
https://prnt.sc/jiijdo
Because you did not include any code at all, it is very hard to help.
But: Because in React a component isn't allowed to have more than one child elements many "unused" divs are used. So my advice would be to get into the Developer Tool and search from the top (html > body > #root > etc) for a top level div that isn't the full height and style it to take the full viewport height (height: 100vh)
You can assign min-height: 100vh to the element of with your background, but it's like a quick fix solution.
If you want to fix issue properly, please include a snippet of your code
const backgroundbg={
backgroundImage: 'url(' + Bgimg + ')', // ES6
height:"100%",
backgroundRepeat:"no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
minHeight: "100vh"
}
this code works for me, it resolve my issues.
im using themes in an app im doing, and need a global css/img/js folder
i have tried using app/webroot as this folder, but cant get any css from a theme to show the images.
I have a setup like :: /app/views/themed/my_theme/webroot/css/file.css
With some css that looks like:
...
body{
background-image: url('../img/file.jpg');
}
...
if i have the image in /app/views/themed/my_theme/webroot/img/file.jpg everything works 100% but when i put the image in /app/webroot/img/file.jpg it will not show. i have tried all sorts of combinations for the
i have also tried using a plugin dir like app/plugins/my_plugin/webroot/img/file.jpg but the various paths ive tried will not show the image either.
any ideas how i can get the image to show? i dont mind if its for webroot/ or in plugins/xyz/, just as long as i can use the same image in many different themes with out having to duplicate the images
when the image is in /webroot/img i can use the full path like url(http://locahost/my_app/img/file.jpg) and it works.
things that dont work
url("img/file.jpg")
url("/img/file.jpg")
url("../img/file.jpg")
url("/../img/file.jpg")
url("../../img/file.jpg")
thanks.
In your CSS file
body{
background-image: url('/img/file.jpg');
}
This will use the root area to find the image in /app/webroot/img/file.jpg
CSS has urls for images relative to the path it is placed in.
CSS files from my_theme are linked like site.com/theme/my_theme/css/style.css in the browser. So if you want to use an image from app/webroot/img in your theme's CSS, use url(../../../img/image.png)
I have not tried that but the cookbook says:
If you want to keep your theme assets
inside app/webroot it is recommended
that you rename app/webroot/themed to
app/webroot/theme.