I can't render the image which I have in my project directory src/images/.
I tried to add image-loader to the project but even this doesn't help.
Here's part of my code:
import React from 'react';
import './styles/styles.scss';
const App = () =>
<div className = "container">
<div className="header">
<img id="ava" src="../src/images/img.png"></img>
<h3>#kkdimaa</h3>
</div>
<img src="https://logos-download.com/wp-content/uploads/2016/02/Twitter_logo_bird_transparent_png.png" className='image' alt="Alps"/>
</div>
export default App;
full repo: https://github.com/dimakononenko/react-drafts
Try this,
`import img from './src/images/img.jpg'` (check the path)
and in the return function,
`<img
src={img}
id="ava"
/>`
Related
Is there any way how to create/structure next.js app for navigation without losing header component state?
Let me explain.
I have header component like this:
import { useState } from "react"
import Link from 'next/link'
export const Header = () => {
const [value, setValue] = useState(1)
return (
<header>
HEADER
<button onClick={() => setValue(value + 1)}>
{value}
</button>
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/test">
<a>About Us</a>
</Link>
</li>
</ul>
</header>
)
}
export default Header
There is a easy couter.
i have two pages.
Index:
const Home = () => (
<div className="container">
<Header />
<main>
Index
</main>
</div>
)
Test:
import Head from 'next/head'
import Header from '../components/header'
const Home = () => (
<div className="container">
<Header />
<main>
Test
</main>
</div>
)
export default Home
I would like to navigate between this pages without losing state i header component. It is possible and how?
One thing you can do is to wrap your entire Next.js app in a layout component which includes the <Header/>. Check out this sandbox I created to see how this pattern can be applied to the example in your question:
https://codesandbox.io/s/so-q-63755826-b-forked-7xt6u
Check out this great article which explains this pattern as well as some other solutions for persisting layout in Next.js:
https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
I would like to return an image as a widget.
I put my photo.png in a folder images next to myFile.jsx.
I have always the same error :
Can't walk dependency graph: Cannot find module './images/photo.png' form /Users/macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx required by /Users/macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx
I have also tried to: move the photo to my Desktop, use require, use import .. from ...
Here there is the code:
import { css } from "uebersicht";
// import photo from "./images/photo.jpg";
// import photo from "./Users/macbookpro/Desktop/photo.png";
export const render = () => {
return (
<div>
<img src="./images/photo.png" />
{/* <img src="./Users/macbookpro/Desktop/photo.png" /> */}
{/* <img src={require("./images/photo.png")} /> */}
{/* <img src={require("./Users/macbookpro/Desktop/photo.png")} /> */}
</div>
);
};
Since myFile.jsx is actually act as a component for uebersicht you have to include your widget folder name in you src.
For example if your photo.png is in example.widget/images folder, your should be:
<img src="example.widget/images/photo.png/>
I am new in Nextjs I am using the swiper in my component but I am getting an error and pagination navigation and swiper CSS is not found this code working fine in Reactjs when I use this code in Nextjs I am getting an error how to import this CSS in Nextjs
enter
import React, { useState } from "react";
import LandingItem from "../landing-item/landing-items-component";
import styles from "./landing-items-preview-styles.module.scss";
import SwiperCore, { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/components/navigation/navigation.scss";
import "swiper/css/components/pagination/pagination.scss";
import "swiper/css/swiper.css";
function LandingItemsPreview({ otherProps: { id, items, name } }) {
return (
<div className={`${styles.landing_items_preview}`}>
<div className={`${styles.header}`}>
<h1 className={`${styles.title}`}>{`Top ${name}`}</h1>
<button className={`${styles.view_all}`}>View All</button>
</div>
<div className={`${styles.swiper_main_container}`}>
<span
disabled={isBeginning}
className={`${styles.custom_swiper_button} ${styles.skewed}`}
onClick={goback}
>
➜
</span>
<Swiper>
{items.map(({ id, ...otherProps }) => (
<SwiperSlide key={id} className={`${styles.TopRestaurant_slides}`}>
<LandingItem {...otherProps} />
</SwiperSlide>
))}
</Swiper>
<span
disabled={isEnd}
className={`${styles.custom_swiper_button}`}
onClick={goNext}
>
➜
</span>
</div>
</div>
);
}
export default LandingItemsPreview;
here
They are available in compiled format, try this:
import 'swiper/components/navigation/navigation.min.css';
Try importing "navigation.min.css" instead "navigation.scss"
I try to load different pictures dynamically. But it won't work yet.
In template i have my img tag with the dynamic source-path:
<template>
<div id="test">
<img src="require('../../assets/containermoduls/${pname}.png')" />
</div>
</template>
here my data function:
<script>
export default {
data () {
return {
pname: '2x5'
}
}
}
</script>
This is my folder structure:
-src
--assets
---containermoduls
----2x4.png
--components
---p3component
----Page3Left.vue (where my code is from)
Does anybody know what I'm doing wrong? I don't get any error messages on my console. Instead of a picture I see someting like an picture icon.
You should use binding :src instead of src
<img :src="require('../../assets/containermoduls/${pname}.png')" />
I was trying to create a survey app using React, Redux. While trying to run the program on localhost:3000, I am getting this React.Children.only expected to receive a single React element child error. I have tried using various solutions which programmers have mentioned elsewhere but nothing has worked. The codes are as below. I must admit I am an absolute tyro as far as programming is concerned
App.js:
import React from 'react';
import {BrowserRouter,Route} from 'react-router-dom';
import Header from './Header';
const Dashboard =() => <h2>Dashboard</h2>;
const SurveyNew =() => <h2>SurveyNew</h2>;
const Landing =() => <h2>Landing</h2>;
const App = () => {
return (
<div>
<BrowserRouter>
<div>
<Header />
<Route exact path= "/" component = {Landing} />
<Route exact path = "/surveys" component= {Dashboard} />
<Route path = "/surveys/new" component={SurveyNew} />
</div>
</BrowserRouter>
</div>
);
};
export default App;
The code of header.js file is as below:
import React, {Component} from 'react';
class Header extends Component {
render () {
return (
<div>
<nav>
<div className = "nav-wrapper">
<a className = "left brand-logo">
Emaily
</a>
<ul className="right">
<li>
<a> Login with Google </a>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Header;