Postingan lainnya
reactjs " ketika menggunakan background-image dynamic
function Catalog(props) {
const {imgSrc, title, desc} = props;
console.log(imgSrc)
return (
<>
<div class="column">
<div class="catalog-img"
style={{
backgroundImage: `url("${imgSrc}")`,
}}></div>
<div class="catalog-img" style="background-image: url("../images/redrika.png");"></div> hasil di atas merusak link url style dari component sy
2 Jawaban:
Jawaban Terpilih
Kode template literal di Javascript nya sudah benar. Kamu bisa coba menghilangkan quote pada url CSS.
<div
style={{
backgroundImage: `url(${imgSrc})`,
}}>
</div>
Tanggapan
terima kasih gan, solusi utamanya ternyata image nya harus di /public/, kalau di selain public ga di import malah jadi " returnnya
terima kasih sudah share, sepertinya itu tidak ada hubungannya dengan masalah quote ya?
Untuk menggunakan background image dynamic dari props di React, gunakan template literals seperti ini:
function Catalog({ imgSrc, title, desc }) {
return (
<div className="column">
<div
className="catalog-img"
style={{
backgroundImage: `url(${imgSrc})`
}}
></div>
<div>{title}</div>
<p>{desc}</p>
</div>
)
}
Poin pentingnya:
- Gunakan template literals
url(${imgSrc})untuk menggabungkan string dan variable - Jangan menggunakan quote di dalam template literals
Dengan begini, imgSrc akan terinterpolasi sebagai URL background image secara dinamis berdasarkan props yang diterima.
Untuk mengatasi masalah quote yang merusak URL sebelumnya, gunakan template literals seperti di atas. Quote hanya diperlukan untuk mendefinisikan style object, bukan untuk isi URL itu sendiri.
