HTML-Webseite: Bild einfügen funktioniert nicht?

<section id="about">
  <h3>About</h3>
  <hr>
  <img src="img/avatar.png" alt="Avatar"/>
  <h4>Mathias by Recedency</h4>

Sieht jemand von euch den Fehler?

Vielen Dank für eure Antworten.

08.05.2020, 20:03

Prinzipiell müsste es ja wie der Pfeil aussehen oder?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

09.05.2020, 02:53

Prüfe zunächst, ob das Bild vorhanden ist.

Nimm dazu die URL deiner Webseite, hänge den relativen Pfad sowie einen beliebigen URL-Parameter an. Also ungefähr so:

https://www.your-website.de/img/avatar.png?a=1

Lade diese Adresse dann im Browser. Wenn das Bild nicht geladen wird, existiert es nicht oder es bestehen keine Leserechte darauf.

Auf dem Webserver lässt es sich auch nachvollziehen: Ausgehend vom Rootverzeichnis müsste ein Ordner img existieren, in dem die avatar.png liegt.

Auf Groß- und Kleinschreibung ist zu achten. Auf Bild und Ordner müssen Leserechte gesetzt sein (wenn du FileZilla nutzt, schau hier, wie man sie setzt).

Sollte das Bild den obigen Tests zufolge existieren, aber dennoch nicht auf der Webseite angezeigt werden, hast du evt. ein Caching-Problem (hänge für diesen Fall im src-Attribut einen beliebigen URL-Parameter an die Bildadresse und lade die Seite erneut)

<img src="img/avatar.png?a=1" alt="Avatar"/>

oder, falls das Bild auch dann nicht angezeigt wird, prüfe dein Markup mit dem W3C-Validator und behebe zunächst alle Fehler.

Bezüglich deines Code-Snippets: Dieses ist, sofern es sich wirklich nur um einen Ausschnitt deines HTML-Dokuments handelt (so deutet es jedenfalls auch dein Screenshot an), korrekt. Andernfalls würde der schließende section-Tag fehlen und auch Seitentitel und Doctype wären nicht gesetzt.

Prinzipiell müsste es ja wie der Pfeil aussehen oder?

Der Pfeil ist doch ein Link und kein Bild.

Math262

Fragesteller

09.05.2020, 11:03

Vielen Dank. Jetzt hat es funktioniert 👍. Ich habe vergessen png bei dem Bild hinzuzuschreiben

Xearox

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

08.05.2020, 20:03

Was sagt denn die Browser Konsole? Der Chrome zeigt an, wenn der was nicht findet.

Hey.

Ich möchte gerne zwischen meinen vier Bildern einen Abstand von 0,5cm - 2cm.

Wie und wo trage ich das ein?

<ul>
  <h4><li><a href="Forum.html">Forum</a></li></h3>
  <h4><li><a href="Kontakt.html">Kontakt</a></li></h3>
  <h4><li><a href="shop.html">Vintage Kleidung & Möbel</a></li></h4>
  <h4><li><a href="Startseite.html">Startseite</a></li></h4>
  <img src="Vintage0.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage3.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage4.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage5.jpg" width="250" height="250" alt="vinjacke">

(Für mich ist das ziemliches Neuland. Bitte Rücksicht nehmen, ich mache das erst seit vorgestern)

PS.: Das ist nur ein Teil meiner HTML-Datei! Ich möchte nur, dass ihr einen kleinen Ausschnitt seht.

Danke.

...zur Frage

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zur Frage

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zur Frage

HTML - Wie kriege ich Text in einen Facebook-Teilen-Button?

Ich kann ohne weiteres einen Text in einen WhatsApp-Teilen-Button bringen, der dann bei einem Empfänger angezeigt wird.

Als Beispiel:

Geht das auch bei Facebook? Hier der HTML-Text zu Facebook.

An welcher Stelle müsste ich den Text "Dieses%20ist%20ein%20Beispieltext%20für%20Gutefrage." in Facebook einfügen so wie in WhatsApp?

...zur Frage

Wie in CSS img source ändern?

Hey:)
Ich habe hier ein Profilbild das rot ist.
<img src=“avatar.png” class=“avatar”>
und es soll gelb werden bei .avatar:hover

Habe deshalb das Selbe Bild nochmal in gelb mit dem namen avatar2.

Wie kann ich das jetzt machen?
.avatar:hover{
src: url(“avatar2.png”);
}
geht leider nicht und ja, die bilder sind im gleichen ordner;/

Danke für Hilfe❤️

...zur Frage

Wieso funktioniert das reCAPTCHA auf meiner Webseite nicht mehr, wegen des Headers?

Hi, ich habe eine eigene Webseite und habe ein Kontaktformular mit einem reCAPTCHA dort erstellt. Gleichzeitig habe ich aber auch um die Sicherheit der Webseite vor möglichen Angriffen durch sogenannte HTTP-Header gesichert. Der Sinn der Header ist ja, nicht eigenen Code zu blockieren, vereinfacht ausgedrückt... Dennoch will ich das reCAPTCHA von Google auf meiner Kontaktseite haben, weiß aber nicht, wie ich den Header ändern muss, damit dieser wieder funktioniert. Ich bin mir auch sicher, dass es an diesem Header, welchen ich gleich aufzeigen werde, liegt, da als ich diesen entfernt habe, das reCAPTCHA wieder funktioniert hat. Könnt ihr mir bitte sagen wie ich den Header ändern muss, damit es wieder funktioniert?

Der Header, wie ich ihn auf meiner Webseite einsetze (ich habe die Header in der .htaccess - Datei gespeichert, falls das eine relevante Information ist):

Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://*.googleapis.com; font-src 'self' https://fonts.googleapis.com/css?family=Roboto|Work+Sans:400,600; img-src 'self'; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com"

Ich hoffe ihr könnt mir weiterhelfen!!! :D

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

Bild kann nicht geladen werden html5?

Hallo ich programmiere seit paar tagen html5 heute wollte ich bilder einfügen <img src="C:\Users\test\desktop\girl.jpg>

Allerdings wenn ich die html öffne sehe ich das bild nicht nur den alternativtext. Wenn ich dann auf Untersuchen gehe steht da Grafik konnte nicht geladen werden was kann ich dagegen tun?

...zur Frage

Bootstrap Column Anordnung ändern (mobile)?

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

...zur Frage

mit klasse von bild in HTML CSS einbinden?

Moin ich habe folgendes Problem:

Ich bin daran eine Webseite für meine Bewerbung zu schreiben, und ich habe dementsprechend ein Bild von mir mit rein gepackt.

jetzt wollte ich eine Klasse im <img src="blablabla" alt=" "> definieren.

ich weiss nicht wieso aber im CSS Stylesheet erkennt es die Klasse dann nicht, jedenfalls wird auf der Website nichts verändert.

Hier noch die Fotos von meinem Code:

CSS

HTML

Habe ich irgend etwas falsch gemacht oder kann mir sonst jemand helfen?

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

HTML Die Tabelle rutscht immer nach unten?

Hallo!
Ich habe momenatn ein Schulprojekt bei dem ich eine Fahradshop mit html bauen soll. Ich habe Bilder in eine Tabelle hinzugefügt (weil es uns so vorgegeben wurde) was auch ohne Probleme geklappt hat. Danach wollte ich unter der Tabelle einen Strich setzten welcher dann aber über der Tabelle angezeigt wurde.

Hier der Code:

<html>
<title>Fahrrad Verkauf</title>
<head><center>
<img src=leisteprodukte.png usemap="#image-map">
</center>
</head>
<body bgcolor=#CAE1FF><center>
  <br><br><br>
  <map name="image-map">
      <area target="" alt="" title="" href="Produkte.html" coords="3640,911,3974,990" shape="rect">
      <area target="" alt="" title="" href="Kaufen.html" coords="4320,990,4039,906" shape="rect">
      <area target="" alt="" title="" href="Startseite.html" coords="4390,889,4732,986" shape="rect">
  </map>
  <map name="1">
    <area target="" alt="Trackind Rad1" title="Trackind Rad" href="Fahrrad1.html" coords="2,1,610,610" shape="rect">
  </map>
  <map name="2">
    <area target="" alt="Trackind Rad2" title="Trackind Rad" href="Fahrrad2.html" coords="2,1,610,610" shape="rect">
</map>
<map name="3">
  <area target="" alt="Mountainbike1" title="Mountainbike" href="Fahrrad3.html" coords="2,1,610,610" shape="rect">
</map>
<map name="4">
  <area target="" alt="Mountainbike2" title="Mountainbike" href="Fahrrad4.html" coords="2,1,610,610" shape="rect">
</map>
<map name="5">
  <area target="" alt="City Rad1" title="City Rad" href="Fahrrad5.html" coords="2,1,610,610" shape="rect">
</map>
<map name="6">
  <area target="" alt="City Rad2" title="City Rad" href="Fahrrad6.html" coords="2,1,610,610" shape="rect">
</map>
<map name="7">
  <area target="" alt="Kinder Rad1" title="Kinder Rad" href="Fahrrad7.html" coords="2,1,610,610" shape="rect">
</map>
<map name="8">
  <area target="" alt="Kinder Rad2" title="Kinder Rad" href="Fahrrad8.html" coords="2,1,610,610" shape="rect">
</map>
<br><br><br><br><br><br>
<span style="font-size:70">Drücke auf die Bilder für eine Groß-Ansicht.</span>
<table bordercolor=#6381d8 border=1>
   <tr>
    <td><img src=Fahrrad1.jpg usemap=#1></td>
    <td><img src=Fahrrad2.jpg usemap=#2></td>
    <td><img src=Fahrrad3.jpg usemap=#3></td>
    <td><img src=Fahrrad4.jpg usemap=#4></td>
  </tr>
   <tr>
    <td><img src=Fahrrad5.jpg usemap=#5></td>
    <td><img src=Fahrrad6.jpg usemap=#6></td>
    <td><img src=Fahrrad7.jpg usemap=#7></td>
    <td><img src=Fahrrad8.jpg usemap=#8></td>
  </tr><br>
  <hr color=#6381d8 size=10 width=100%>
</body>
</html>

...zur Frage

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<head>

</head>

<body>

<h1 id="title">Today's Quiz</h1>

</ol>

</div>

</div>

<h2 id="score-title">Your Score</h2>

<button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

</div>

<h2>Answers :</h2>

</ol>

</div>

</body>

</html>

JAVA SCRIPT:

...zur Frage

HTML/CSS Hilfe - zwei Textfelder mit Bild nebeneinander?

Wie löse ich das Problem? Oben mein derzeitiger Stand - unten der Wunschzustand :)

HTML

<div id="main2">
   <div class="col1">
      <h3>Vivamus nec</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col2">
      <h3>Lorem ipsum</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
   </div>

Wie würdet ihr das mit CSS lösen?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen