cara mengakses file foto di reactjs agar bisa ditampilkan

Permisi gan,numpang nanya nih sayakan lagi buat aplikasi kecil yang tujuannya buat nampilin list tempat wisata.buat datanya kaya gambar,judul,lokasi,harga diambil dari db mysql pake expressjs.

buat nampilin judul,lokasi,harganya berhasil,tapi buat nampilin gambarnya gk berhasil,padahal URL di atribut src udah di ulik2 dan ngarahnya udah bener ke directory fotonya..

question.png

Buat kodenya ada dibawah,ada yang tau gimana cara buat nampilinnya?minta bantuannya yah gan masih baru belajar soalnya sama pensaran juga hehe..kalo ada yang kurang jelas boleh ditanyain..

import React,{Component} from "react";
import {Link} from "react-router-dom";
import Header from "./Components/Header";
import Footer from "./Components/Footer";
import "./Components/style.css";

class TempatWisata extends Component{
    constructor(props){
        super(props)
        this.state = {
            Items : []
        };
    }

   componentDidMount(){
        fetch("http://localhost:4000/json",{
        header : {
            "Content-Type" : "application/json",
            "Access-Control-Allow-Origin" : "*"
        }
        })
        .then(response=>response.json())
        .then(data=>this.setState({Items : data}))
    }

    render(){
        const Items = this.state.Items;
        return(
            <container>
                <Header />
                <div className="">
                    <h1>Tempat wisata terbaru</h1>
                    <ul className="">
                        { Items.map( (element,index) =>
                        <li key={index}>
                            <Link to="">
                                <img src={'./Components/img/tempat_wisata/' + element.urlimage } alt="" />
                                <h4>{element.nama_tempat_wisata}</h4>
                                <p>{element.harga}</p>
                                <p>{element.lokasi}</p>
                            </Link>
                        </li>
                        )}
                    </ul>
                </div>
                <Footer />
            </container>
        );
    }
}

export default TempatWisata;
avatar nogi
@nogi

21 Kontribusi 2 Poin

Diperbarui 4 tahun yang lalu

2 Jawaban:

<div>sepertinya ini ada hubungannya dengan path-nya.<br>coba saja buka image-nya lewat browser dulu (e.g. http://localhost:3000/./Components/img/tempat_wisata/22232323.jpg )<br>untuk memastikan uri-nya sudah benar.<br>karena di img.src-nya ada path ./ ; ini bisa interpretasikan berbeda oleh browser.<br>coba baca <a href="https://www.w3schools.com/html/html_filepaths.asp">HTML File Paths</a><br><br></div>

avatar soeleman
@soeleman

120 Kontribusi 147 Poin

Dipost 4 tahun yang lalu

Tanggapan

ssssssssssssssssssssssssss

<div>file image nya di import dulu di atas. misal:</div><pre>import image from './Components/img/tempat_wisata/22232323.jpg'</pre><div><br>lalu di image nya spt ini</div><pre>&lt;img src={image} alt="" /&gt;</pre><div><br>selamat mencoba :)</div>

avatar rroossyyiidd
@rroossyyiidd

17 Kontribusi 8 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban