Postingan lainnya
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;
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>
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><img src={image} alt="" /></pre><div><br>selamat mencoba :)</div>