I'm having a problem showing images in the React-bootstrap carousel. The carousel itself works. I see the arrows and index at the bottom. But the images just won't show. When I inspect element and hover over the image component, it works fine. The image has been linked fine, the carousel is working, but the images wont show. Anyone knows a fix on this problem?
This is what my test code looks like. I just put it in the about me section for reference. See image for working carousel and working image in dev tools.
import React from "react";
import "./section.css";
import "../../App.css";
import { useTranslation } from "react-i18next";
import { Carousel } from "react-bootstrap";
function About() {
const { t } = useTranslation();
return (
<section class="about section">
<Carousel>
<Carousel.Item>
<img
class="d-block w-100"
src={require("../../assets/keukenhofplattegrond.png")}
alt="First slide"
></img>
</Carousel.Item>
<Carousel.Item>
<img
class="d-block w-100"
src="https://lorempixel.com/800/400/food/1"
alt="First slide"
></img>
</Carousel.Item>
</Carousel>
</section>
);
}
export default About;
dev tools inspect
Carousel image
You need to change class to className. class keyword is reserved in Javascript and that is why React uses className instead.
More info: https://reactjs.org/docs/introducing-jsx.html#specifying-attributes-with-jsx
Please try adding width and height to the image.
Try to import the img and then pass it to the img tag.
import {yourImage} from "route" and then put it on the src.
maybe that works.
Related
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
I'm beginner in ReactJS and I would like to render the slides of my carousel showing a piece of the previous slide and also of the next slide, what I need to do is like this in the example below:
I am currently using the react-elastic-carousel library, but I am not attached to it, any library that works in ReactJS I am willing to use. Currently in my code, the slide is showing 100% of the space.
Here's my code I put into codesandbox.io:
import React from "react";
import "./styles.css";
import Carousel from "react-elastic-carousel";
export default function App() {
return (
<div className="App">
<Carousel itemsToShow={1} initialActiveIndex={3}>
<div className="div">1</div>
<div className="div">2</div>
<div className="div">3</div>
<div className="div">4</div>
<div className="div">5</div>
<div className="div">6</div>
<div className="div">7</div>
</Carousel>
</div>
);
}
Thank you in advance for the help
I was able to show some of the previous and next slides by changing the overflow on the slider-container:
.rec.rec-slider-container {
overflow: visible;
}
I would also put overflow-x: hidden; on your body so that it doesn't scroll left and right.
codesandbox.io
I have a React app created with create-react-app. It contains the standard src/ directory and I have created a src/assets/home/ directory where I have saved image files that I intend to use in my project. I am not sure how to get the image referencing correctly within components in my app.
I have the following component that I pass a set of properties whose path is src/scenes/Home/InfographicSection/InfographicBlock/InfographicBlock.js:
<InfographicBlock
title="Some Title"
description="some text"
imgPath="../../../../assets/home/home-logo.png"
/>
The InfographicBlock uses the library react-lazyload (https://www.npmjs.com/package/react-lazyload):
import React from 'react';
import LazyLoad from 'react-lazyload';
const InfographicBlock = (props) => (
<div className="infographic-block columns">
<LazyLoad height={200}>
<img src={require(`${props.imgPath}`)} alt="" />
</LazyLoad>
<div className="content-container column">
<h2 className="subtitle">{props.title}</h2>
<p>{props.description}</p>
</div>
</div>
);
export default InfographicBlock;
The image referencing works great if I add the string path directly to the image tag like so:
<img src={ require('../../../../assets/home/home-logo.png') } />
However seeing as this is a component, I want to pass in the property as a variable to reuse the component.
I have tried variations of this without success:
<img src={require(`${props.imgPath}`)} alt="" />
Any help is appreciated.
What i did was import the image first.
import product1 from './Images/female_sport3.jpg'
<ProductPage currency={currency} currencyRate={currencyRate} product1={product1}></ProductPage>
Inside ProductPage.js
const {currency, currencyRate, product1} = props
<img src={product1} alt=""></img>
This is the reference for import image: https://www.edwardbeazer.com/importing-images-with-react/
I am new to react.js and JS in general.
I am looking for an example of code that:
uses react functions, not classes.
let the user upload an image using
then display that image on the screen
Thanks in advance.
First image should copy in to project path and import that into your page
import img from "../../assets/img/logo.svg";
render() {
return (
<div className="content" >
<img id="logo-img" src={img} alt="logo" />
</div>
)
}
I am attempting to import some local pictures in a JavaScript file 'Photos-Photos.js' and export those pictures to be used in another JavaScript (React) file in order to avoid a bunch of imports in my main React file 'Photos.js'
I have attempted to put all of the images in a single object but I have now just resorted to exporting every variable holding the local path to the photos
In a nutshell, here is my Photos.js (React) file
import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import * as Pics from "./Photos-Photos";
class Photos extends Component {
render() {
return(
<div className="main-body-wrapper">
<main className="body-content">
<div className="slideshow-row-wrapper">
<div className="slideshow-row-content">
<div className="slideshow-title-wrapper">
<div className="slideshow-title">
<h3>Sustainabilibash</h3>
</div>
<div className="photo-credz">
<p>Photos by: John Doe</p>
</div>
</div>
<div className="main-slider-wrapper">
<div className="main-slider-content">
<Carousel>
<Carousel.Item>
<img className="d-block w-100" src={Pics.AlChE1} alt="pic" />
</Carousel.Item>
<Carousel.Item>
<img className="d-block w-100" src={Pics.AlChE2} alt="pic" />
</Carousel.Item>
</Carousel>
</div>
</div>
</div>
</div>
</main>
</div>
);
}
}
Here is my 'Photos-Photos.js' file where I am exporting the images
export const AlChE1 = "./../images/photos/AlChE/AlChE-0.jpeg";
export const AlChE2 = "./../images/photos/AlChE/AlChE-1.jpeg";
I am receiving no errors; however, instead of displaying the image, I am being displayed with the alt text, 'pic'. I have attempted to just import every image in the 'Photos.js' React file and it works perfectly, but I don't want a bunch of imports in that file (The number of exported images in the 'Photos-Photos.js' code above is only ~ 1/10 of the images I need to use for this page)
one thing you can do its on each img tag import it's own pic like
img src={require('~/myphoto.jpg')}
and if you make the carousel manually and render the photos one after one you get tou your goal