Forum Mjukvara Programmering och digitalt skapande Tråd

Jag försöker få in bilder som jag själv tagit in i ett HTML dokument men de visas ej i förhandsvisningen?

1
Skriv svar
Permalänk
Medlem
●

Jag försöker få in bilder som jag själv tagit in i ett HTML dokument men de visas ej i förhandsvisningen?

Hej! Jag är ganska ny med kodning och försöker få in bilder som jag fört över från min iPhone in i mitt HTML dokument så att de visas på min webbplats. Eftersom bilderna inte har någon webbadress har jag testat att skriva in deras plats på datorn vilket gjorde att de visades ett tag men eftersom de ligger på mitt privata skrivbord, på min Mac visas de inte när jag publicerar webbplatsen på min skolas server. Hur gör jag för att de inte ska ha en "privatadress"?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Hej! Jag är ganska ny med kodning och försöker få in bilder som jag fört över från min iPhone in i mitt HTML dokument så att de visas på min webbplats. Eftersom bilderna inte har någon webbadress har jag testat att skriva in deras plats på datorn vilket gjorde att de visades ett tag men eftersom de ligger på mitt privata skrivbord, på min Mac visas de inte när jag publicerar webbplatsen på min skolas server. Hur gör jag för att de inte ska ha en "privatadress"?

Gå till inlägget

Du får nog ge lite mer info.

  1. Du skriver: "Min skolas server.", vad innebär det? Är det någon web-plattform som skolan tillhandahåller, eller har du en "tom" linuxserver du vill ska visa din hemsida?

  2. Hur ser din HTML-kod ut?

Visa signatur

:(){ :|:& };:

🏊🏻‍♂️   🚴🏻‍♂️   🏃🏻‍♂️   ☕

Får det lov att vara en kaffe?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av GLaDER:

Du får nog ge lite mer info.

  1. Du skriver: "Min skolas server.", vad innebär det? Är det någon web-plattform som skolan tillhandahåller, eller har du en "tom" linuxserver du vill ska visa din hemsida?

  2. Hur ser din HTML-kod ut?

Gå till inlägget

Skolans server är en webbserver, där vi har en webbsida som vi ska ladda upp vårt innehåll på via Cyberduck. Såhär ser min kod ut: <img src="/Users/snackorna/Desktop/index/pet.JPG" height="160" width="125" />, för att bilden ska visas har jag skrivit, mitt användarnamn, var bilden ligger och vad bilden heter. Detta funkade från början men inte när jag lägger över filen till servern vilket jag förstår men vet inte hur jag ska ändra på det.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Skolans server är en webbserver, där vi har en webbsida som vi ska ladda upp vårt innehåll på via Cyberduck. Såhär ser min kod ut: <img src="/Users/snackorna/Desktop/index/pet.JPG" height="160" width="125" />, för att bilden ska visas har jag skrivit, mitt användarnamn, var bilden ligger och vad bilden heter. Detta funkade från början men inte när jag lägger över filen till servern vilket jag förstår men vet inte hur jag ska ändra på det.

Gå till inlägget

Adressen: /Users/snackorna/Desktop/index/pet.JPG existerar sannolikt inte på webservern. Du behöver:

  1. Ladda upp pet.JPG till "någonstans" på webservern

  2. Ändra <img src="/Users/snackorna/Desktop/index/pet.JPG" height="160" width="125" /> så att din path stämmer överens med "någonstans"

Visa signatur

:(){ :|:& };:

🏊🏻‍♂️   🚴🏻‍♂️   🏃🏻‍♂️   ☕

Får det lov att vara en kaffe?

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Som @GLaDER skriver så behöver bilden existera på servern (eller en annan server som är nåbar). Se till att tanka upp bilderna på servern tillsammans med din html fil och se över din "path" i img src taggen.

https://www.w3schools.com/html/html_filepaths.asp

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av GLaDER:

Adressen: /Users/snackorna/Desktop/index/pet.JPG existerar sannolikt inte på webservern. Du behöver:

  1. Ladda upp pet.JPG till "någonstans" på webservern

  2. Ändra <img src="/Users/snackorna/Desktop/index/pet.JPG" height="160" width="125" /> så att din path stämmer överens med "någonstans"

Gå till inlägget
Skrivet av anon228747:

Som @GLaDER skriver så behöver bilden existera på servern (eller en annan server som är nåbar). Se till att tanka upp bilderna på servern tillsammans med din html fil och se över din "path" i img src taggen.

https://www.w3schools.com/html/html_filepaths.asp

Gå till inlägget

Okej, förstår men hur gör man en path till en fil som ligger i Cyberduck?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Du ska tänka på sökväg utifrån var din html-fil ligger. Om bilden ligger i samma mapp som html-filen så skriver du bara filnamnet i din src, ligger filen i en mapp som ligger i samma nivå som din html-fil så skriver du mappnamn/filnamn i din src.

Visa signatur

Phanteks P400A RGB : Asus Prime X570-P : Ryzen 9 5900X : Corsair H100X : 32GB G.Skill Trident Z Neo 3600CL14 : Sapphire Nitro+ 6800 XT : Xiaomi 34" Curved 3440x1440 : Playseat Evolution Alcantara : Thrustmaster T300RS GT / Ferrari SF1000 Edition Add-on : HP Reverb G2

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Okej, förstår men hur gör man en path till en fil som ligger i Cyberduck?

Gå till inlägget

Cyberduck är programmet du laddar upp dina filer till skolans server med?

På samma ställe där du laddar upp din index fil kan du antagligen trycka på Action i cyberduck och välja new folder, eller på något vis skapa en mapp i allafall. Döp den till förslagsvis bilder, och ladda upp dina bilder där.

Då blir sökvägen "bilder/pet.JPG". Om du redan har laddat upp dina bilder så dessa ligger bredvid din index-fil så borde det räcka att skriva "pet.JPG" när du ska länka in den.

Som ovan skriver, du ska tänka utifrån vart bilderna ligger i förhållande till dina html-filer-

Visa signatur

Main: Strix B550-F | R9 5950X | 32GB@3600MHz | ASUS 3080 TUF | KC3000 | RM850 | LG 48CX
Server: Strix B450-I | R7 2700X | 64GB | SF450

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Alphahanne:

Du ska tänka på sökväg utifrån var din html-fil ligger. Om bilden ligger i samma mapp som html-filen så skriver du bara filnamnet i din src, ligger filen i en mapp som ligger i samma nivå som din html-fil så skriver du mappnamn/filnamn i din src.

Gå till inlägget
Skrivet av macmann1:

Cyberduck är programmet du laddar upp dina filer till skolans server med?

På samma ställe där du laddar upp din index fil kan du antagligen trycka på Action i cyberduck och välja new folder, eller på något vis skapa en mapp i allafall. Döp den till förslagsvis bilder, och ladda upp dina bilder där.

Då blir sökvägen "bilder/pet.JPG". Om du redan har laddat upp dina bilder så dessa ligger bredvid din index-fil så borde det räcka att skriva "pet.JPG" när du ska länka in den.

Som ovan skriver, du ska tänka utifrån vart bilderna ligger i förhållande till dina html-filer-

Gå till inlägget

Jag har nu lagt in alla bilder i en speciell mapp, "bilder" på servern men hur jag än länkar till bilderna i HTML-dokumentet så dyker de inte upp... Jag har skrivit in det som ni sa "bilder/pet.jpg" men även med URL:en som cyberduck ger bilden. Men ingenting fungerar :((

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Jag har nu lagt in alla bilder i en speciell mapp, "bilder" på servern men hur jag än länkar till bilderna i HTML-dokumentet så dyker de inte upp... Jag har skrivit in det som ni sa "bilder/pet.jpg" men även med URL:en som cyberduck ger bilden. Men ingenting fungerar :((

Gå till inlägget

Laddar du upp html-dokumentet på nytt efter ändring?

Har du testat en ctrl+F5 på webbsidan så det inte är en gammal cache som visas?

Har du varit noga med versaler osv i filnamn? Om bilden heter pet.JPG så är det pet.JPG du ska skriva t.ex. Inte pet.jpg. Du kan även testa att skriva /bilder/pet.jpg.

Kan du visa hur det ser ut i filstrukturen på servern med ett screenshot?

Visa signatur

Main: Strix B550-F | R9 5950X | 32GB@3600MHz | ASUS 3080 TUF | KC3000 | RM850 | LG 48CX
Server: Strix B450-I | R7 2700X | 64GB | SF450

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av macmann1:

Laddar du upp html-dokumentet på nytt efter ändring?

Har du testat en ctrl+F5 på webbsidan så det inte är en gammal cache som visas?

Har du varit noga med versaler osv i filnamn? Om bilden heter pet.JPG så är det pet.JPG du ska skriva t.ex. Inte pet.jpg. Du kan även testa att skriva /bilder/pet.jpg.

Kan du visa hur det ser ut i filstrukturen på servern med ett screenshot?

Gå till inlägget

Hej! Ja jag har laddat upp den nya versionen av dokumentet, men syns fortfarande ingenting. Jag har varit försiktig med stora och små bokstäver. De enda bilderna som syns på hemsidan är de som jag har länkat till genom adresser från webben. Vet inte hur man publicerar bilder här, man måste skriva in länkar och det funkar inte när jag gör det men i cyber duck har jag mina dokument html, en mapp med bilder och sen min css fil.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av linneaagnes:

Hej! Ja jag har laddat upp den nya versionen av dokumentet, men syns fortfarande ingenting. Jag har varit försiktig med stora och små bokstäver. De enda bilderna som syns på hemsidan är de som jag har länkat till genom adresser från webben. Vet inte hur man publicerar bilder här, man måste skriva in länkar och det funkar inte när jag gör det men i cyber duck har jag mina dokument html, en mapp med bilder och sen min css fil.

Gå till inlägget

Du får nog langa upp lite skärmdumpar (använd imgur) om du vill ha mer hjälp.

Visa signatur

:(){ :|:& };:

🏊🏻‍♂️   🚴🏻‍♂️   🏃🏻‍♂️   ☕

Får det lov att vara en kaffe?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av GLaDER:

Du får nog langa upp lite skärmdumpar (använd imgur) om du vill ha mer hjälp.

Gå till inlägget

Såhär ser min cyberduck ut:
https://imgur.com/tAfcZER

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av linneaagnes:

Såhär ser min cyberduck ut:
https://imgur.com/tAfcZER

Gå till inlägget

Och såhär ser min "bildhänvisning" ut i Brackets...
https://imgur.com/qvSVtPz

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av GLaDER:

Adressen: /Users/snackorna/Desktop/index/pet.JPG existerar sannolikt inte på webservern. Du behöver:

  1. Ladda upp pet.JPG till "någonstans" på webservern

  2. Ändra <img src="/Users/snackorna/Desktop/index/pet.JPG" height="160" width="125" /> så att din path stämmer överens med "någonstans"

Gå till inlägget
Skrivet av linneaagnes:

Såhär ser min cyberduck ut:
https://imgur.com/tAfcZER

Gå till inlägget
Skrivet av linneaagnes:

Och såhär ser min "bildhänvisning" ut i Brackets...
https://imgur.com/qvSVtPz

Gå till inlägget

Jag tycker att det borde fungera, men mitt sista förslag är att prova: /nfs/students_public_html/dahlin-0/bilder/floydpasang.jpg.

Visa signatur

:(){ :|:& };:

🏊🏻‍♂️   🚴🏻‍♂️   🏃🏻‍♂️   ☕

Får det lov att vara en kaffe?

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●

Öppna websidan som inte funkar med Chrome
Tryck F12
I undre fönstret, byt till Console.

Står det några fel där?
Om inte, tryck F5 och kolla om det kommer upp några fel.

Klistra in felen här. Se till att inte ha kvar någon info som du inte vill dela, men ta inte bort mer än nödvändigt.

Visa signatur

Använd gilla för att markera nyttiga inlägg!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Tyvärr så det rätt stora brister i många kurser online. De borde gå igenom grunden i en hur filer och program fungerar.

Råder dig först till att skapa en mapp i din dokumentmapp som du döper till "ltu" och i den mappen skapar du en lämplig mapp vad den delen av kursen heter. t.ex "uppgift1" där lägger du allt som hör till den uppgiften. På så sätt samlar du allt i samma mapp som du sedan kan ladda upp genom Cyberduck till skolans server.

Lite grunden i filhantering när det gäller webben är:

  1. Använd alltid små bokstäver. Både i filnamn och ändelser. (.jpg, .html, m.m.). webbservern gör skillnad på stora och små bokstäver även på filändelsen.

  2. Använd inte mellanslag i filnamn eller åäö eller specialtecken.

  3. Undvik fasta path-vägen som går från "roten". I ditt fall ska det räcka med att använda bilder/filnamn.jpg även lokalt i datorn.

Ett tips om du vill visa kod här i forumet är att använda taggarna

[code]

Här lägger du din kod

[/code]

Det som @giplet säger är mycket bra sätt för att se fel i sin kod, det användar man dagligen i sin kodning.

Visa signatur

Custom SweC - Optimerar utseendet på Sweclockers. 14 Mars: Nu i version 0.5.2 med nya funktioner!
Installera Custom SweC UserCSS
Glöm inte att Geeks har en egen Discord-server: discord.geeks.se

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

testa att lägg bilden i samma katalog som din html, och ta bord /bilder ur sökvägen.

tänkte om det är något konstigt fel gällande behörighet till mappen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bild</title>
</head>
<body>
    <img src="floydpasang.jpg">

</body>
</html>

borde fungera.

Visa signatur

I5 9600k@stock / Cooler Master Evo 212 / Gigabyte Z390 Gaming X / Corsair Vengeance LPX 16GB DDR4 3000MHz / MSI RTX2070 Gaming Z / EVGA 550 BQ / Asus VG27BQ 27" 165Hz

Ryzen 5 5600x@stock / Asus Rog Strix X570-E Gaming / Corsair Vengeance RGB Pro 16GB 3600MHz CL18 / MSI RTX3070 Suprim X / BeQuiet Pure Power 11 600W / Asus VG278Q 27" 144Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av giplet:

Öppna websidan som inte funkar med Chrome
Tryck F12
I undre fönstret, byt till Console.

Står det några fel där?
Om inte, tryck F5 och kolla om det kommer upp några fel.

Klistra in felen här. Se till att inte ha kvar någon info som du inte vill dela, men ta inte bort mer än nödvändigt.

Gå till inlägget

Hej! Detta är felen jag kunde hitta, det står såhär på alla bilder:

Failed to load resource: the server responded with a status of 404 (Not Found)

Förutom på en som det står såhär på:
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Kontrollera vilka behörigheter mappen bilder har, kan vara där problemet ligger.

Visa signatur

Phanteks P400A RGB : Asus Prime X570-P : Ryzen 9 5900X : Corsair H100X : 32GB G.Skill Trident Z Neo 3600CL14 : Sapphire Nitro+ 6800 XT : Xiaomi 34" Curved 3440x1440 : Playseat Evolution Alcantara : Thrustmaster T300RS GT / Ferrari SF1000 Edition Add-on : HP Reverb G2

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack alla för hjälpen, till slut funkade det!! Var tvungen att gå in på bilderna via min "studenthemsida" och ta den länken in i HTML dokumentet. Nu funkar allt som det ska tack för alla tips!

Redigera
Citera flera Citera
1
Skriv svar