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" />
Related
Before, when i don't import materialize
it's ok
not import materialize
After, when i imported materialize in index.js it broke my page like this
the page have a container grid 12 column but i don't know how it do that, i just import not do any thing to want to have grid 12 column
import materialize.
i hope every one can explain for me in this case :((
-- I have classname coinciding with Materialui, it is "container"--
return (
<div className="container">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
We can see that the container of Material UI is active
--After changing its name, it worked as I expected.--
return (
<div className="player__list">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
After I changed the name "container" it was active
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.
I've just started learning about reactjs and bulma.css. I'm trying to make a <footer> to stick to the bottom of the page using bulma's flexbox since I want to avoid writing my own css rules.
I already installed bulma using npm and imported bulma.css in the index.js like this
import "bulma/css/bulma.css";
but my code below still makes the <footer> to stick under the header..
<div className='container'>
<header className='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer className="has-text-centered is-flex-align-items-flex-end">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
The straightforward-bulma way would look something like:
Make sure the body and html are the full page height
Since this is every project-dependent, I've used the classic body { height: 100vh; } for now
The same for the container, it needs to be enlarged. Using the is-fullheight from the hero elements can be used (note: Consider using a hero instead of the container)
Give the footer a mt-auto which is short for margin-top: auto. This will force the footer to stick to the bottom of the page
html, body { height: 100vh; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<div class='container hero is-fullheight'>
<header class='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer class="has-text-centered is-flex-align-items-flex-end mt-auto">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
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.