This picture that I am trying to import will not show up on my webpage with. I am new to react and very frustrated with this I have read the facebook documentation but I am still lost. Help, please.
https://jsfiddle.net/gexcoz1k/
I am trying to log the file path to the console but it is saying it is undefined
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import computer from './computer.png';
class Home extends Component {
render() {
return (
<div className="main-content home">
<div>
<img src={compter} title='computer' />
</div>
<small className="description"> </small><br/>
<small className="description"> Miami,FL </small>
<p className="about">Hello, and thank you for visiting my website. I have always been a computer guy I remember inspecting elements in middle school and changing some text and thinking I hacked the school website. To then creating my own website with basic HTML and CSS in high school. </p>
<br/>
<p className="about">From there I decided to go to college for Computer Science where I studied languages like C++ and learned how to think like a programmer. The ability to create things you think of into a real space fascinates me. I love solving problems and being creative so programming is perfect for me it seems as it has always been a part of my life. Currently, I am learning more frameworks next I plan to learn back-end and in a few years delv into machine learning.</p>
{/* Add Email Button */}
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=tyriquedaniel14#gmail.com,tyrique1.daniel#gmail.com&su=Programming-Inquiry&body=BODY" target="_blank"rel="noopener noreferrer" className="email">
Email Me
</a>
<a href="https://drive.google.com/file/d/1o5Fxe49MugM1b2Z6IW2lN6s1gXqmvcTf/view?usp=sharingn" target="_blank" rel="noopener noreferrer" className="email">
Resume
</a>
<ul>
<li>LinkedIn</li>
<li>Github</li>
<li>SoloLearn</li>
<li>SoloLearn</li>
</ul>
<hr />
<h3>What i am currently Using </h3>
<Link to="/teachers" >HTML</Link>
<Link to="/teachers" >Javascript</Link>
<Link to="/teachers" >React </Link>
<Link to="/teachers" >CSS</Link>
<Link to="/teachers" >BootStrap</Link>
<Link to="/teachers" >Docker</Link>
<Link to="/teachers" >NPM</Link>
<Link to="/teachers" >Accessibility/Mobile Responsive</Link>
</div>
);
}
}
export default Home;
I would like this picture to show up
The import statement is only meant for modules.
Try require('./computer.png')
You are using wrong spelling, it must be comp(U)ter not compter
<img src={computer} title='computer' />
Small Suggestion: If you don't have state then use stateless method
Related
How can i do animations in react? Is there any useful package for this? Should i create a custom hook and make a script? I want to do an animated text and also a canvas to display a color as the mouse moves around.
This is my content
Main.js:
import React from 'react'
import Heading from '../organisms/Heading'
import Button from '../atoms/Button'
import './Main.css'
const Main = () => {
return (
<div className='main_container'>
<section className="main" id="main">
<div className="content">
<h2>Hello, I´m <br/> <span>Mateo Ghidini</span></h2>
<div className="animated-text">
<h3>Web Designer</h3>
<h3>Jr Full-stack Web Developer</h3>
</div>
<Button className="btn" content="See My Work"/>
<div className="media-icons">
<i className="fab fa-linkedin-in"></i>
<i className="fab fa-github"></i>
</div>
</div>
</section>
</div>
)
}
export default Main
CSS animations. This way is the best for a simple animation. When you use it instead of importing javascript micro libraries, your bundle is smaller.
ReactTransitionGroup. This module has been developed by the guys from ReactJs community. Developers describe this library as:
“A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.”
The link to that repository is here.
After creating the next.js environment using "npx create-next-app#latest ./" and running "npm run dev".
The very basic commands to run, This error pops up:-
`
../../../#React Projects/My projects/causs/styles/global.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ..\..\..\#React Projects\My projects\causs\pages\_app.js
The code in _app.js is default that comes while creating next.js
import '../styles/global.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
the code in index.js is same, which comes as default:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
`
Anything else you can see by going through the repository.
The next.config.js file is also default one.
`
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
module.exports = nextConfig
I have installed latest version of node - v18.12.1 and npm - 8.19.2 Please help, I've no idea what to do. except adding and removing
import '../styles/global.css'
` in pages/_app.js file.
In conclusion, a newbie with next.js who has only created two projects, tried "npx create-next-app#latest ./"
and then when I ran the environment it resulted with `
../../../#React Projects/My projects/causs/styles/global.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ..\..\..\#React Projects\My projects\causs\pages\_app.js
`
I haven't made any changes at all, the code and files in the project was by default.
Note: I tried running my previous project too on my pc, which resulted in same error while it seems to do just fine where I've published.
As it turns out the problem was in parent directory name;
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
The cause of this error is peculiar, which I can't fathom. The parent directory as over here -
/#React Projects/My projects/causs/styles/global.css;
"React Projects" has a special character in it which caused the error to pop up once I removed it, the problem was over and my new and old projects are working just fine now.
I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.
This is an Ubuntu distro on WSL on a windows laptop.
I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).
I noticed that a manually coded url to an image in the same folder was changed to
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=
My component is
import React from "react";
import star from "../images/star.png";
export default function Card(props) {
return (
<div className="card">
<div className="card--image">
<h3 className="card--availability">SOLD OUT</h3>
<img src={`../images/${props.img}`} alt="not working"></img>
</div>
<div className="card--rating">
<img src={star}></img>
<p className="card--dark-text">{props.rating}</p>
<p className="card--light-text">
({props.reviewCount}) · {props.country}
</p>
</div>
<p className="card--desc">{props.title}</p>
<div className="card--price">
<h5>From ${props.price}</h5>
</div>
</div>
);
}
Which is used in
import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
export default function App() {
return (
//<Hero />
<div>
<Navbar />
<Card
img="zeferes.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Playing on the beach with me."
price={136}
/>
</div>
);
}
My file directory looks like
And every other property works.
The displayed screen right now is:
What is going wrong?
Thank you for any help.
import for the image file(zeferes.png) is missing in Card component.
importing image file in Card component should fix the issue.
I recently deployed a website from Netlify using a demo GitHub repo that I copied. Although it seems pretty straightforward at first, I know too little about JS, HTML and CSS to continue. I'm only looking to host three pages that contain only text and hyperlinks, but I cannot for the life of me figure out how to implement more than one page with this particular code base I started with. Here's the index.js script:
import Head from 'next/head'
import Header from '#components/Header'
import Footer from '#components/Footer'
export default function Home() {
return (
<div className="container">
<div className="container-1">
<Head>
<title>Cool Page Title</title>
<link rel="icon" href="/coolicon.ico" />
</Head>
<div className="box-1">
<h3>Links</h3>
<p>
Current page <br />
Page 2 <br />
Another Page
</p>
</div>
<div className="box-2">
<h3>My cool page</h3>
<p>
Site under construction. <br />
For all inquiries, please call 555-5555
</p>
</div>
</div>
<div className="container-2">
<Footer />
</div>
</div>
)
}
The syntax is the really tricky part for me. The Home() function seems to return the html for the home page, so then how would I implement a second page and have the links change them out? Would a switch/case statement work here?
Okay, so I figured out what I didn't previously understand. Turns out I was (unknowingly) using Next.JS. To handle multiple pages, I just created separate files, identical to the index.js file, but with a different file and function name, and then linked to them using:
<Link href="/">Home</Link> <br />
<Link href="/newpage">New Page</Link> <br />
Where the first link directs you to the index page and the second takes you to the page titled "newpage." Guess it really was that simple.
Oh, and I also had to include this import statement at the beginning of each file that used links:
import Link from 'next/link';
Greetings fellow nerds,
Hope you had a great thanksgiving. I have been working on my portfolio website lately and have almost completed it. Luckily this time I saved the best problem for last, but I haven't had any luck hacking it.. so hopefully one of you has a helpful answer.
So here's the problem:
I have a slider on my front page which at the moment shows the slider starting from the top of the 1st image. Which makes sense of course. But what if I would wish to have it start in focus on the 2nd image?
I tried something with the index without any luck. But here's two pictures that can hopefully help explain the problem:
Bad:
Good:
Scroll container code:
import React from "react";
import { ProjectData } from "../projects/ProjectData";
import ProjectImage from "./ProjectImage";
import ScrollContainer from "react-indiana-drag-scroll";
import "./scss/ProjectCarousel.scss";
export default function ProjectCarousel() {
return (
<ScrollContainer className="scroll-container">
{ProjectData.map(({ id, ...otherProps }) => (
<ProjectImage key={id} {...otherProps} />
))}
</ScrollContainer>
);
}
Project image component code:
import React from "react";
import GitIcon from "../soMe/icons/github_legend.png";
import "./scss/Project.scss";
export default function ProjectImage({ imageUrl, alt, github,
webUrl }) {
return (
<div className="image">
<a href={webUrl} alt="Go to this project's website">
<img src={imageUrl} alt={alt} />
<a href={github} alt="See project on Github">
<div className="overlay">
<img src={GitIcon} alt={alt} />
</div>
</a>
</a>
</div>
);
}
Appreciate any hints or solutions
The images required a fixed height to be rendered and picked up by the scrollto