I'm new to React and Bootstrap. I'm using Bootstrap 5.1.
I'm trying to create a Navbar with my logo in it. No matter what I try, I can't get the image to display. Here is my Navbar.js
import React from 'react';
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src="/img/logo.svg" width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
The path to the logo is here, '/react-app/src/img/logo.svg' and I've tried pathing it multiple different ways without success.
And here is what I see.
What am I missing?
You need to use import to load the path like this:
import houseImgPath from './img/logo2.png' // replace with your own path
and then use it in your img src
<img alt="House" src={houseImgPath} width="30" height="30"/>
You should keep your image somewhere inside the src as you are doing (contrary to other suggestions) and import it like a module. The only time you might use the public folder is (maybe) if you wanted to preload the image or use the image as an icon for the app.
import React from 'react';
import img from './img/image.jpg' // or '../path/relative/to/component/image.jpg'
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src={img} width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
You need to import the image for example:
import imageName from './img/logo2.png';
<img alt="House" src={imageName} width="30" height="30"/>
you need to put images in public folder in order to get this path img/logo2.png try it please and let me know
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 am in process of making a small SEO library for my website. It's available as #peuconomia/react-meta-tags publicly.
Now, the library is working fine from my perspective. As <SummaryCard /> component is currently wrapped by one Fragment with 5 meta tags as children. Now, in Nextjs code below. I am trying to print the meta tags using the <SummaryCard /> component. But, the head will not render the component.
Nextjs documentation reports that the Head component will render inside it at most one Fragment deep component. The <SummaryCard> works fine when used on main, but not from Head.
How to make it work inside of <Head />.
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {SummaryCard} from "#peuconomia/react-meta-tags/lib/twitter";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<SummaryCard
title={'Title'}
description={'Nothing to see here'}
imageAlt={'Image of Pokimane.'}
site={'#peuconomia'}
imageUrl={new URL('https://google.com/image.jpg')}
key={'twitter'}
/>
<title>Learn to Code</title>
<meta name="description"
content="freecodeuniversity.com. A place to learn all about the web. We teach you all the programming language(s) including HTML*, CSS and Javascript. We also teach about both NoSQL and SQL databases."/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Learn to Code!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</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/master/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"
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>
)
}
EDIT:
title, meta or any other elements (e.g. script) need to be contained
as direct children of the Head element, or wrapped into maximum one
level of <React.Fragment> or arrays—otherwise the tags won't be
correctly picked up on client-side navigations.
This is what Next.js suggests. It must be direct children of Head but is no problem if I add one Fragment to it as well. And, I am adding only one fragment to it at the moment.
I'm new in React, and I use react-router and bootstrap version 3.4 examples section.
First example - when I run my project doesn't show my project. I will show the codes:
import React from "react"
class Header extends React.Component{
render(){
return(
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default Header
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.
this may help
Both and components can be used to define and design declarative navigation around an application. Within either component, we can use the “to” attribute to specify the location pathname to which the link will direct.
import { NavLink } from "react-router-dom";
<NavLink to="/" className="<any classes like>float-left">Home</NavLink>
<NavLink to="/about" className="<any classes like>float-left">About</NavLink>
here is a great example
https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900
I have created a react project using following command:
npx create-react-app project
I have installed bootstrap 4.3.1 using npm command and I have also imported bootstrap into the index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
But for some reason it is not displaying icons.
export class Navbar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-light bg-dark mb-5">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand text-white text-lg brand-text" to="/">
MovieSeriesInfo</a>
</div>
<ul className="navbar-nav ml-auto text-light d-inline-block">
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-imdb fa-5x" id="imdb-logo" />
</li>
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-react fa-5x" id="react-logo" />
</li>
</ul>
</div>
</nav>
</div>
)
}
}
export default Navbar;
First, you should install "bootstrap-icons" npm package:
npm install bootstrap-icons
Then, import "bootstrap-icons.css" in your index.js file:
import "bootstrap-icons/font/bootstrap-icons.css";
You need to install font-awesome and import the same,
npm install font-awesome --save
import in index.js file
import 'font-awesome/css/font-awesome.min.css';
For more on how to use font-awesome icons see this.
As far as I know Bootstrap 4.* doesn't support Glyphicon natively, so you should use an alternative, or downgrade to bootstrap 3.* which is not recommended. Fontawesome.com is an option.
I know this question has an accepted answer, but it's for others who did the same mistake as I did. Add this <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet"> tag in index.html, it has the web fonts cdn link. It's given in bootstrap's usage to add this link for icon fonts. Don' just install and the <i> tag. I found it here
I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.
The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.
Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.
According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.