i am trying to import a logo but i keep getting this error. the logo is in the assets in my src folder.
import React from 'react';
import {logo} from '../assets'
const Navbar = () => {
return (
<div className='w-full h-[80px] bg-white border-b'>
<div className='max-w-[1480px] m-auto w-full h-full flex justify-between items-center'>
<img src={logo} />
</div>
</div>
)
}
export default Navbar
and the error i get is this. [vite] Internal server error: Failed to resolve import "../assets" from "src\components\Navbar.jsx". Does the file
exist?
i tried using lots of different ways thinking it was a syntax error but nothing worked.
Try with the following line
import logo from '../assets/logo.png'; //change file extension
Related
I'm exploring Gatsby to make a static website with multiple pages. Those pages will have the same template, just the text will change. To make it easier, I'm going to create a single template. I want to store the content of the different pages (text, path etc.)in Yaml or JSON file. So basically it would look like this :
import React from "react";
import content from '../content/pageContent.yaml'
const Template = () => {
return (
<header className="div1">
<div className="flex items-center justify-center container mx-auto">
<div className="basis-1/2 el tagline">
<h1>{content.title}</h1>
<p>{content.description}</p>
<button>Lets go</button>
</div>
<div className="basis-1/2 el">
<img src=`../images/${pic}`
</div>
</div>
</header>
...
)
}
export template
Here is my pageContent.yaml
title: YAML content used at build time with Gatsby
description: my description with a <b>bold word</b>
pic: mypicture.png
Everything works great but the problem is that it doesn't render the HTML tags. But if I use <h1 dangerouslySetInnerHTML={ {__html: content.titre} }></h1> instead of <h1>{content.title}</h1> it renders the HTML tag.
My question is : is it ok to make it this way? Would it be a better way to do that ?
Thanks a lot
dangerouslySetInnerHTML exposes your app to security risks such as Cross-site scripting XSS attacks.
You could use a library like react-markdown to convert the markdown to html.
Here is an example of how you could do it, adapt as appropriate.
import React from "react";
import content from '../content/pageContent.yaml'
import ReactMarkdown from "react-markdown";
const Template = () => {
return (
<header className="div1">
<div className="flex items-center justify-center container mx-auto">
<div className="basis-1/2 el tagline">
<ReactMarkdown source={content.title} />
<ReactMarkdown source={content.description} />
<button>Lets go</button>
</div>
<div className="basis-1/2 el">
<img src=`../images/${pic}`
</div>
</div>
</header>
...
)
}
export template
I am trying to make a smooth transition to my second panel of the page by making anchor, as I read on the internet the proper way to do this is by using react.scroll but after doing everything like on the internet my tag simply don't work, while inspecting it with the browser it shows and tag with no destination to go to.
my app comopnent is site in this project:
`
import React, {Component} from 'react';
import Firstpanel from "./firstpanel";
import Secondpanel from "./secondpanel";
import Thirdpanel from "./thirdpanel";
class Site extends Component {
render() {
return (
<div className={"h-screen snap-y snap-mandatory overflow-x-hidden"}>
<div className={"snap-start bg-[url('../public/images/banner_cropped.png')] bg-dark-grey bg-blend-multiply bg-[length:100vw_100vh] h-screen w-screen "}>
<Firstpanel></Firstpanel>
<Secondpanel></Secondpanel>
<Thirdpanel></Thirdpanel>
</div>
</div>
);
}
}
export default Site;
`
then my first panel:
`
import React, {Component} from 'react';
import {Link} from "react-scroll";
class Firstpanel extends Component {
render() {
return (
<section className={" w-screen h-screen flex justify-center items-center flex-col gap-20"}>
<h1 className={"font-bold text-8xl text-beige select-none"}>Welcome to the coding world!</h1>
<p className={"font-bold text-4xl text-beige select-none"}>This site is going to be my personal portfolio for future projects</p>
<Link className={"w-16 h-16 rounded-full mt-12 animate-bounce"} to="sec" spy={true} smooth={true}>
<div className={"rounded-full w-16 h-16 bg-[url('../public/images/second_white_arrow_down.png')] bg-cover cursor-pointer"} type="button">
</div></Link>
</section>
);
}
}
export default Firstpanel;
`
and my second panel:
`
import React, {Component} from 'react';
class Secondpanel extends Component {
render() {
return (
<section className={"snap-start bg-dark-grey h-screen w-screen"}>
<h1 id="home">Hi Paul</h1>
</section>
);
}
}
export default Secondpanel;
`
I tried play with the react.scroll, but even after that it alwyas did nothing
I saw that tutorial : radiobutton
So I decided to check it it works using the following code with React and Tailwind :
import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
import Navbar from "./components/Navbar";
import LivePortal from "./components/LivePortal";
import WorkContainer from "./components/WorkContainer";
import HomePage from "./components/Homepage";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const App = () => {
return (
<>
<input className="sr-only peer" type="radio" value="yes" name="answer" id="answer_yes">
<label
className="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-green-500 peer-checked:ring-2 peer-checked:border-transparent"
htmlFor="answer_yes">Yes</label>
<div className="absolute hidden w-5 h-5 peer-checked:block top-5 right-3">
👍
</div>
</>
);
}
export default App;
But I go the following error : /src/App.js: Unterminated JSX contents (23:7)
You can see the full project here : My project
Could you help me please ? I don't understand why it does not work ... Thank you very much !
You need to put the self closing tag on the input tag. Right now its just a > but should be />
I just want to ask how to properly import images and videos in nextjs? My images doesn't load on nested route page, like this -> localhost:3000/about/missionVision It works on single path though, like this -> localhost:3000/about
This is the code of the component with image that doesn't load on nested route/page.
import React, { Fragment } from "react";
const Banner= () => {
return(
<Fragment>
<header className="banner">
<div className="container">
<div className="logo">
<img src="./images/logo.png" alt="our logo"/>
</div>
</div>
</header>
</Fragment>
)
}
export default Banner;
I used to use this format of importing, but there's always an error when I imported videos/mp4 files, plus image doesn't show. ( I migrated cra to next)
import React, { Fragment } from "react";
import logo from "./../../public/images/logo.png";
const Banner= () => {
return(
<Fragment>
<header className="banner">
<div className="container">
<div className="logo">
<img src={ logo }/>
</div>
</div>
</header>
</Fragment>
)
}
export default Banner;
This is my file structure
root folder
components
Banner
-index.js
page
public
images
videos
Thank you!
Edit: This is the error that shows whenever I try to import a video.
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
No Need for import public path just try to access from the public path.
<img src={"/images/xyz.svg"} />
I have a JS file; Cards.js which implements a card-style div:
import React from "react";
import CardItem from "./CardItem";
import "./Cards.css";
function Cards() {
return (
<div classNam="cards">
<ul className="cards__items">
<CardItem
src={require("../images/img-9.jpg").default}
text="text"
label="label"
path="/jobs"
/>
</ul>
</div>
);
}
export default Cards;
And then CardItem.js:
import React from "react";
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<div>
<li className="cards__item">
<Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap"
data-category={props.label}>
<img
src={props.src}
className="card__item__img"
alt="alt"
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text} </h5>
</div>
</Link>
</li>
</div>
);
}
export default CardItem;
However, on my site, the images from CardItem are not displayed. The Text, Label and Path all work, but no image.
I've looked around and have seen different solutions to this issue but none have worked for me.
I've tried using
src="../images/img-9.jpg"
instead of using require but that also didn't work.
What's weird is I can see the path AND the preview of the image when looking at the Chrome inspection panel, but they won't load.
I've also tried putting the images folder in the Public directory which is another solution I've seen, but I get an error saying something about loading resources outside of /src