“Bilder hochladen” Code-Antworten

Bild -Upload

<input type="file" id="fileinput" name ="image" multiple="multiple" accept="image/*" />

Laden Sie Dateien img hoch

import React,{useState,useEffect} from 'react'
import axios from 'axios';
import {Link} from "react-router-dom";



function Slider() {
  const [slider, setSlider] = useState([]);

  useEffect(()=>{
    async function AboutGet(){
        let res = await axios.get("http://localhost:5003/slider")
        setSlider(res.data);
    }
    AboutGet();
},[])
  

    return (
< >

<div id="carouselExampleCaptions" className="carousel slide" data-bs-ride="carousel">
  <div className="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div className="carousel-inner">
    {
      slider.map((element, index)=> {
        return(
          <div key={element._id}>
            <div className="carousel-item active">
      <img src={`http://localhost:5003/${element.files[0].filePath}`}  className="d-block w-100" alt="..."/>
      <div className="carousel-caption   captionText mb-5 ">
      <p> {element.text1}</p>
        <h5>{element.title1}</h5>
       
        <Link to="stan" className="btn btn-orange btn-rounded btn-medium ">{element.button}</Link>
      </div>
    </div>
    <div className="carousel-item">
      <img src={`http://localhost:5003/${element.files[1].filePath}`}  className="d-block w-100" alt="..."/>
      <div className="carousel-caption   captionText mb-5 ">
        <p>{element.text2}</p>
          
        <h5>{element.title2}</h5>
        <Link to="stan" className="btn btn-orange btn-rounded btn-medium ">{element.button}</Link>
      </div>
    </div>
    <div className="carousel-item ">
      <img src={`http://localhost:5003/${element.files[2].filePath}`} className="d-block w-100" alt="..."/>
      <div className="carousel-caption   captionText mb-5 ">
        <p>{element.text3}</p>

        <h5>{element.title3}</h5>
        <Link to="stan" className="btn btn-orange btn-rounded btn-medium ">{element.button}</Link>
      </div>
    </div>
          </div>
        )
      })
    }
  </div>
  <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Previous</span>
  </button>
  <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span className="carousel-control-next-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Next</span>
  </button>
</div>    
</>
    )
}

export default Slider
Akmal

Bilder hochladen

# Upload and share your images.
https://imgbb.com/
Tiago F2

Ähnliche Antworten wie “Bilder hochladen”

Fragen ähnlich wie “Bilder hochladen”

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen