Ik ben een website aan het ontwikkelen met wampserver op localhost en ik probeer mijn site op mobiel te bekijken op mijn lokale netwerk.
Ik heb de startpagina en site-URL in Settings > General gewijzigd van
Aan
Ik heb ook de velvet blues URL-plug-in gebruikt om mijn afbeeldingen enz. bij te werken van localhost naar mijn ip.
Al mijn afbeeldingen op mijn site worden op mobiele apparaten weergegeven, behalve afbeeldingen op de rij op de achtergrond van de startpagina. Ik heb de URL gecontroleerd in Chrome-ontwikkelaarstools en het URL-pad is hetzelfde als de afbeeldingen die worden weergegeven. Ik weet niet hoe ik verder moet gaan.
Alle hulp zou geweldig zijn.
Opmerkingen
- Dat ' s raar. Dus je bedoelt dat de URLs geldig zijn, maar niet worden weergegeven?
- Ja. Ik heb het url-pad gecontroleerd en het is hetzelfde. Het enige verschil is dat ik kan zien is dat de afbeeldingen die worden weergegeven img-tags zijn en de afbeeldingen die niet worden weergegeven achtergrondafbeeldingen zijn, dwz weergegeven: gebruik < img src = " ip / site / wordpress / wp-content / uploads / 2017/06 / image.jpg " > maar niet weergegeven zijn background-image: url ( ip / site / wordpress / wp-content / uploads / 2017/06 / image. jpg ). Kan de achtergrondafbeelding een probleem veroorzaken, zelfs als de URL correct is? Bedankt.
Antwoord
Relatieve paden werken anders wanneer ze worden gebruikt in een CSS-bestand. Het gedrag is nog steeds hetzelfde, en het pad is nog steeds relatief, maar voor een mens kan het verwarrend lijken.
Wanneer u een pad als dit gebruikt voor uw afbeelding:
<img src="/path/image.jpg"/> De browser kijkt in het path map, gelegen in de root van het huidige web. Maar als je dezelfde waarde in je CSS gebruikt:
background-image: url( "/path/image.jpg" ); Het verhaal is anders. De browser kijkt in de map path, op basis van waar de stylesheet zich bevindt, niet de huidige URL. Dus als het stylesheet zich bevindt op:
www.example.com/wp-content/themes/twentyseven/ Dan zoekt de browser naar:
www.example.com/wp-content/themes/twentyseven/path/image.jpg Wat niet bestaat. Het is dus belangrijk om je CSS-paden te bouwen ten opzichte van het pad van de stylesheet.
Voor een beter begrip, kijk eens hier .
Reacties
- Ter verduidelijking: if background-image url ( ip / site / wordpress / wp-content / uploads / 2017/06 / image.jpg ) en mijn stylesheet staat op C: \ wamp64 \ www \ site \ wordpress \ wp-content \ themes \ theme \ style.css moet ik bestandspad C: \ wamp64 \ www \ site \ wordpress \ wp-content \ themes \ theme \ site \ wordpress \ wp-content \ uploads \ 2017 \ 06 \ image.jpg maken ?
- Nee. Voer eerst
ip/site/wordpress/wp-content/uploads/2017/06/image.jpgin uw browser in en kijk of het wordt geopend. Als dit het geval is, wilt u de URL misschien tussen''likebackground-image url('URL')of voeghttp://toe voorip. - I blz ut dat pad in een browser en het wordt geopend. In dev-tools heeft het http: // voor de ip, maar het is niet tussen aanhalingstekens geplaatst. Ondanks het ontbreken van citaten worden achtergrondafbeeldingen weergegeven op mijn localhost-website, maar niet mobiel. Bedankt.
Antwoord
Het probleem lag niet bij de img src of de URL van de achtergrondafbeelding, het was met Apache en de firewall. Ik weet nog steeds niet waarom, maar toen ik het http.vhosts.config-bestand veranderde en de wamp-server vernieuwde en vervolgens de firewall-instellingen voor Wamp uitschakelde, zijn de afbeeldingen zichtbaar. Als ik het andersom deed door de firewall te veranderen en vervolgens Apache, waren de afbeeldingen niet zichtbaar.