I am working in a ReactJS app and I am using Create React App along with TailwindCSS.
It is recommended to keep images close to where they are used. So I have my image and the component that will use that image in the same folder.
My component looks like this:
import LoginHeroImage from "./niceimage.jpg";
const Login = () => {
return (
<div className="flex h-full w-full">
<div className="bg-red-100 h-full w-full">
<h1>Login</h1>
<p>Welcome back, log in</p>
<div>
<label>Email</label>
<input type="text" />
</div>
<div>
<label>Password</label>
<input type="password" />
</div>
<div>
<label>Remember me for 30 days</label>
<input type="checkbox" />
</div>
</div>
<div className={`bg-[url('${LoginHeroImage}')] h-full w-full`}></div>
</div>
);
};
export default Login;
I'm aiming for a login screen like this.
I want to use that image as a background for the <div>, how can I do that with TailwindCSS, the above doesn't work. I get the following error:
Compiled with problems:X
ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css) 9:36-81
Module not found: Error: Can't resolve '${LoginHeroImage}' in '/home/j/code/dentalcloud.io/frontend/src'
I could "hack it" and put the image file manually in the public folder, but that is an auto-generated folder and if I delete it, I have to remember to re-add the image.
Related
I have a simple site structure using Gatsby.
In my index.js page, which is my homepage, I have the following code.
<Layout>
<div className="heroContainer" onMouseEnter={console.log('enter')}>
<div className="greetingContainer">
<h1>Hi</h1>
</div>
<div className="selfieContainer">
<StaticImage className="selfie" src="../images/{path}_Selfie.png" alt="Joshua Aggas selfie" ></StaticImage>
</div>
<div className="shortDescriptionContainer">
<img src={theAnyKey} alt="is it working" />
</div>
</div>
<div className="postContainer">
<div className="postContainerHeadings">
<p>Latest</p>
</div>
<div className="postListing">
{Posts}
</div>
</div>
</Layout>
I'm importing the any key gif but I just keep seeing the alt text.
I'm following this official documentation which states not to use the static image component. https://www.gatsbyjs.com/docs/how-to/images-and-media/working-with-gifs/
Here is my import statement at the top of the file.
import { theAnyKey } from "../images/theAnyKey.gif"
I'm not getting any 404 so I know it's sourcing the file correctly. What am I doing wrong?
Use default import instead of named:
import theAnyKey from "../images/theAnyKey.gif"
Then:
<img src={theAnyKey} alt="is it working" />
I'm trying to fetch data from an external API. It shows at first but when I refreshes the browser, it goes blank. The code is in my GitHub repo. thanks
https://github.com/Rengkat/weather-app.git
The initial state of data is {}. As a consequence, data.name and data.sys are undefined, so trying to render data.sys.country throws an error before the app can render the input field.
<div className="details">
<div className="country">
<h3>
{data.name}, {data.sys.country}
</h3>
I recommend setting the initial state of data to null and wrapping everything other than the input field in a conditional that only allows rendering if data is truthy:
function FetchDataComponent() {
const [data, setData] = useState(null);
...
return (
<div className="container">
<div className="input">
<input
type="text"
placeholder="Enter country..."
value={country}
onChange={handleChange}
onKeyPress={fetchData}
/>
</div>
{data ? (
<div className="details">
<div className="country">
<h3>
{data.name}, {data.sys.country}
</h3>
</div>
...
hello i am facing a issue with react tailwind text area , i am tring to apply mt-5 but it is not working. When i added using style={{marginTop:"1.25rem"}} it is working , similarly properties like height margin ... are not applying to text area in react
function (){
return (
<div className=" w-24 m-5">
<input placeholder="name" className="pl-2 rounded-sm" />
<textarea className=" mt-5"></textarea>
<button className="mt-5 bg-gray-300 text-gray-800 px-2 py-1 hover:bg-black hover:text- white rounded-sm hover:underline">
submit
</button>
</div>
);
}
i actually find a problem that the react is adding a additional style to the textarea and that is overwriting the textarea, i find this is inspector, in textarea there is a additional style
how can i avoid this aditional style and who is adding it, is it tailwind or react
this was not problem with tailwind nor react , it was my browser and extensions, i removed those extensions and it is working
Thank you for your time. I am having trouble making this Link work in react. I have used BrowserRouter and Passed the router a path and a component. However I still get a cross origin Error and Help would be awesome. Here is the code
class Products extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-4">
<div className="card">
<img
className="card-img-top"
src="/images/pathToYourImage.png"
alt="Card cap"
/>
<div className="card-body">
<h4 className="card-title">Card title</h4>
<p className="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<Link to="/">
<div className="btn btn-primary">
Go somewhere
</div>
</Link>
</div>
</div>
</div>
<div className="col-4">Product Two</div>
<div className="col-4">Product Three</div>
</div>
</div>
);
}
}
export default Products;
There was no reason to include Route or BrowserRouter
<Link to="/"><div className="btn btn-outline-primary">Go Somewhere</div></Link>
worked fine after checking indentation
Cross origin resource sharing (cors) is disabled for security reasons, you will need to manually enable it.
I use a package called cors for express based backend.
Step 1
npm install cors
Step 2
const cors = require('cors')
Final step
app.use(cors())
This will enable CORS for all routes. You can also enable for individual routes. Check the doc on github
I am learning React on the fly for a project and am having trouble adding classes to already existing components. I have checked other SO threads and looked through tutorials on the react site - it looks like I am doing it correctly with the className but it is not working. For example, in my Event.js:
render: function() {
return (
<div>
<article>
<div className="row">
{ this.drawOrderError() }
<div className="large-4 columns event-img-div">
<img src={ this.props.image }/>
</div>
<div className="large-8 columns event-right-column">
{ this.state.showCreditCard ? this.drawCreditCard() : this.drawTicketing() }
<br />
<div className="event-detail">
<div className="row">
<div className="large-12 column">
<span className="ticket-column-headings">Event Details</span>
<p className="event-details">{this.props.description}</p>
</div>
</div>
</div>
</div>
</div>
</article>
{ this.drawOrderSummaryOverlay() }
</div>
);
}
I have added the class event-img-div - but when I go to the browser I do not see it added in console, and cannot apply styles to that class. What am I doing wrong? Can provide more code if needed.
I am changing the files in a local directory and running on local host, using gulp to start the server.