Bagaimana cara menaikkan level di jalur src dari URL di HTML?

101

Saya menyimpan lembar gaya di {root} / styles sementara gambar di {root} / gambar untuk situs web. Bagaimana cara memberikan jalur di lembar gaya untuk dilihat di direktori gambar untuk gambar yang ditentukan?

mis. Dalam background-image: url('/images/bg.png');

html css relative-path aateeque
sumber

Jawaban:

184

Gunakan ..untuk menunjukkan direktori induk:

background-image: url('../images/bg.png');
lonesomeday
sumber
Saya membacanya di tempat lain juga- tetapi tidak berhasil! (setidaknya di Chrome)
aateeque
27
Memang. Namun perhatikan bahwa lokasinya relatif dengan lokasi file CSS, bukan dokumen yang menyematkan file CSS.
ThiefMaster
1
@ThiefMaster Seharusnya jika kita hanya menggunakan inline CSS
1000Gbps
57

Berikut ini semua yang perlu Anda ketahui tentang jalur file relatif:

  • Dimulai dengan / kembali ke direktori root dan mulai dari sana

  • Dimulai dengan ../ memindahkan satu direktori ke belakang dan mulai dari sana

  • Dimulai dengan ../../ memindahkan dua direktori ke belakang dan mulai dari sana (dan seterusnya ...)

  • Untuk maju , cukup mulai dengan sub direktori pertama dan terus maju.

Klik di sini untuk lebih jelasnya!

S. Akruwala
sumber
52

Penggunaan ../:

background-image: url('../images/bg.png');

Anda dapat menggunakannya sesering yang Anda inginkan, misalnya ../../images/atau bahkan pada posisi yang berbeda, misalnya ../images/../images/../images/(sama seperti ../images/tentunya)

ThiefMaster
sumber
9

Di Chrome ketika Anda memuat situs web dari beberapa server HTTP, jalur absolut (mis. /images/sth.png) Dan jalur relatif ke beberapa direktori tingkat atas (mis. ../images/sth.png) Berfungsi.

Tapi!

Saat Anda memuat (di Chrome!) Dokumen HTML dari sistem file lokal Anda tidak dapat mengakses direktori di atas direktori saat ini. Yaitu Anda tidak dapat mengakses ../something/something.sthdan mengubah jalur relatif menjadi absolut atau apa pun tidak akan membantu.

jaboja
sumber
1
Setelah memeriksa ulang, saya dapat melaporkan bahwa jalur relatif sistem file lokal dengan menggunakan ../berfungsi dengan baik - atau setidaknya berfungsi dengan baik dalam kasus khusus ini!
aateeque
1
Itu berfungsi di linux dan windows, bukan di mac (pengalaman saya)
gabn88
Tautan tidak dihitung di sini, karena tidak ada pemeriksaan asal yang sama untuk mereka. Juga jawaban ini berusia 6 tahun jadi browser mungkin telah banyak berubah.
jaboja
1
Saya hanya mengkonfirmasikan untuk orang lain yang melihat jawabannya
Ajay
0

Misalkan Anda memiliki struktur file berikut:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

Di CSS Anda dapat mengakses image1, misalnya, menggunakan baris ../images/image1.png.

CATATAN : Jika Anda menggunakan Chrome, itu mungkin tidak berfungsi dan Anda akan mendapatkan kesalahan bahwa file tidak dapat ditemukan. Saya memiliki masalah yang sama, jadi saya baru saja menghapus seluruh riwayat cache dari chrome dan berhasil.

A.Tressos
sumber
0

Jika Anda menyimpan lembar gaya / gambar dalam sebuah folder sehingga beberapa situs web dapat menggunakannya, atau Anda ingin menggunakan kembali file yang sama di situs lain pada server yang sama, saya menemukan bahwa browser / Apache saya tidak mengizinkan saya untuk pergi ke folder induk apa pun di atas URL root situs web. Hal ini tampaknya jelas karena alasan keamanan - seseorang tidak boleh menjelajahi server di mana pun selain folder web yang ditentukan.

Misalnya. tidak berfungsi: www.mywebsite.com/../images

Sebagai solusinya, saya menggunakan Symlinks:

Masuk ke direktori www.mywebsite.com Jalankan perintah ln -s ../images images

Sekarang www.mywebsite.com/images akan mengarah ke www.mywebsite.com/../images

Leendert
sumber