pad in root map met of zonder slash
Code (php)
1
.../public_html/afbeeldingen/plaatje.png
Als ik een relatief pad gebruik dan kan ik dit doen:
<img src="afbeeldingen/plaatje.png">
maar ook dit:
<img src="/afbeeldingen/plaatje.png">
Het werkt allebei, maar ik vraag me af of er verschil in zit. Wat is de juiste manier?
"http://host.nl/afbeeldingen/plaatje.png"
En wanneer je "/afbeeldingen/plaatje.png" dan word je link : http://host.nl//afbeeldingen/plaatje.png
En dit vind ik zelf ook minder mooi, het kan trouwens ook zo zijn dat het bij sommige host niet werkt. Omdat hij er dan vanuit gaat dat er tussen // nog een directory zit die er niet is. En dan kan hij het plaatje niet vinden.
En misschien maar dat weet ik niet zeker is "http://host.nl//afbeeldingen/plaatje.png" langzamer. Omdat hij // ziet staan en dat kent hij niet dus moet hij er iets van maken en dit kost iets tijd.
Ik zelf gebruik altijd "<img src="afbeeldingen/plaatje.png">" omdat ik vaak genoeg gehad heb dat mijn host het bestand anders niet kan vinden.
Gewijzigd op 16/01/2013 05:49:52 door Bas van de Steeg
Gewijzigd op 16/01/2013 11:06:40 door No One
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
No One op 16/01/2013 11:04:52:
je hebt ook nog ./ om het pad relatief te maken
Hoer werkt dat met "./" ?
Ward van der Put op 16/01/2013 12:41:25:
Beetje off-topic maar voor de volledigheid: de Google HTML/CSS Style Guide adviseert om het protocol weg te laten bij verwijzingen naar afbeeldingen en andere mediabestanden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
Ik denk dat dat is omdat de browser dan zelf aanvult met http of https. Dit zou je echter in PHP kunnen ondervangen in je html bestanden. In de css wordt dat lastig.
Is dit:
Code (php)
1
2
3
2
3
.example {
background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}
background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}
eigenlijk hetzelfde als dit:
Code (php)
1
2
3
2
3
.example {
background: url('/afbeeldingen/plaatje.jpg');
}
background: url('/afbeeldingen/plaatje.jpg');
}
Ozzie PHP op 16/01/2013 14:17:39:
Is dit:
eigenlijk hetzelfde als dit:
Code (php)
1
2
3
2
3
.example {
background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}
background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}
eigenlijk hetzelfde als dit:
Code (php)
1
2
3
2
3
.example {
background: url('/afbeeldingen/plaatje.jpg');
}
background: url('/afbeeldingen/plaatje.jpg');
}
Als één host meerdere domeinnamen heeft, kan de tweede URL verwijzen naar bijvoorbeeld http://www.example.com/afbeeldingen/plaatje.jpg. En zoals je zelf al terecht opmerkt: de eerste URL gaat bij https:// problemen geven.
Afbeeldingen die in CSS worden gebruikt, plaats ik zelf liever in dezelfde directory, zodat paden en protocol helemaal niet in de weg zitten. Bovendien kun je dan voor CSS-bestand en bijbehorende afbeeldingen gemakkelijker dezelfde caching instellen.
Code (php)
1
2
3
2
3
.example {
background: url('plaatje.jpg');
}
background: url('plaatje.jpg');
}
Code (php)
1
2
2
.../public_html/afbeeldingen/plaatje.jpg
/css
/css
Maakt het dan nog iets uit of je dit...
Code (php)
1
2
3
2
3
.example {
background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}
background: url('http://www.mijnsite.nl/afbeeldingen/plaatje.jpg');
}
dit...
Code (php)
1
2
3
2
3
.example {
background: url('/afbeeldingen/plaatje.jpg');
}
background: url('/afbeeldingen/plaatje.jpg');
}
of dit doet?
Code (php)
1
2
3
2
3
.example {
background: url('../afbeeldingen/plaatje.jpg');
}
background: url('../afbeeldingen/plaatje.jpg');
}
Is het een sneller / beter dan het ander? Ik denk dat optie 2 de beste is?
Gewijzigd op 16/01/2013 14:42:19 door Ozzie PHP
Hebben we het hier over een Windows systeem of Linux?
Want doorgaans is het bij een Linux systeem zo dat: /path/afbeelding.png meestal niet daar staan.
Althans ik heb mijn plaatjes niet in / staan.
dus logisch gezien is het ../path/plaatje.png wat wil zeggen 2 stapjes terug. Of ./path/plaatje.png wat zegt 1 stapje terug.
Wil je zeker ervan zijn url/path/plaatje.png
Maar /map/plaatje.png lijkt me niet goed.
Toevoeging op 16/01/2013 14:55:25:
Of ik mis een truukje, of mijn theorie is niet meer up to date..
Hebben we het hier over een Windows systeem of Linux?
Want doorgaans is het bij een Linux systeem zo dat: /path/afbeelding.png meestal niet daar staan.
Althans ik heb mijn plaatjes niet in / staan.
dus logisch gezien is het ../path/plaatje.png wat wil zeggen 2 stapjes terug. Of ./path/plaatje.png wat zegt 1 stapje terug.
Wil je zeker ervan zijn url/path/plaatje.png
Maar /map/plaatje.png lijkt me niet goed.
De link /images/somepicture.png is dan eigenlijk http://www.example.com/images/somepicture.png, dus relatief naar de root van de website
images/somepicture.png is relatief naar de map waar index.php instaat
“Note that the absolute path cannot be empty; if none is present in the original URI, it MUST be given as "/" (the server root).”
Gewijzigd op 16/01/2013 15:19:31 door Ward van der Put
optie 1
Code (php)
1
2
3
2
3
.example {
background: url('/afbeeldingen/plaatje.jpg');
}
background: url('/afbeeldingen/plaatje.jpg');
}
optie 2
Code (php)
1
2
3
2
3
.example {
background: url('../afbeeldingen/plaatje.jpg');
}
background: url('../afbeeldingen/plaatje.jpg');
}
(Die laatste optie weet ik eigenlijk niet zeker of die klopt. Ik ga er dan vanuit dat je in de css map zit, en dan 1 map omhoog gaat, en dan de afbeeldingen map ingaat.)
Maar omdat in CSS gebruikte afbeeldingen geen content maar presentatie zijn én omdat de CSS-code bepaalt hoe en wanneer ze worden getoond, zou ik ze dus in de directory met de bijbehorende CSS-bestanden opslaan.
Quote:
(Die laatste optie weet ik eigenlijk niet zeker of die klopt. Ik ga er dan vanuit dat je in de css map zit, en dan 1 map omhoog gaat, en dan de afbeeldingen map ingaat.)
En daarom is optie 1 dus beter. Niet omdat de een 'een heeeeeel erg klein beetje' sneller is dan de ander, maar omdat de één veel duidelijker is dan de ander.
@Wouter: helder :)