Bild wird nicht auf der Webseite mit HTML angezeigt

Ich habe Probleme mit HTML5 ein bisschen. Ich muss ein Bild auf einer Webseite anzeigen, aber es wird einfach nicht angezeigt. Es wird angezeigt, als ob das Bild nicht existiert. Dies ist mein Code so weit:Bild wird nicht auf der Webseite mit HTML angezeigt

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="stylesSelecao.css" media="screen"> 
    <title>Twitter</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
</head> 



<body class="inner"> 
    <script> 
    $(function() { 
     var posts = [{ 
    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.", 
    "date": "2014-09-20T01:52:32 +03:00", 
    "likes": 696, 
    "user": { 
     "id": 0, 
     "username": "edna", 
     "location": "Woodlands, New Mexico", 
     "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png", 
     "bio": "Dolor aliqua nisi nisi culpa velit deserunt quis qui Lorem cillum dolor eiusmod adipisicing. Labore cupidatat mollit ullamco duis excepteur anim et enim do adipisicing id. Deserunt eiusmod magna cupidatat proident et.\r\n", 
     "friends": 1 
    } 
    }   
]; 
     $.each(posts, function(i, f) { 
     var userPicture = f.user.picture; 
     var dadosPost = "<div>"+'<figure><img src="userPicture"/></figure>'+ "<h3>" + f.user.username + "</h3>" + f.date + f.content +"</div>"   
     $(".inner").prepend(dadosPost) 
     }); 
    }); 
    </script> 



</body> 

    </html>

Quelle

2016-09-19 Vinícius Oliveira Barros

Sie verwenden die Zeichenfolge"userPicture" als URL und nicht den Inhalt dieser Variablen.

Sie müssen die Variable verwenden.

var dadosPost = "<div>"+'<figure><img src="' + userPicture + '"/></figure>'+ "<h3>" + f.user.username + "</h3>" + f.date + f.content +"</div>"

Ein besserer Ansatz wäre es, Strings nicht zusammen zu HTML zu mähen. Es ist schwer zu lesen und leicht zu machen, diese Art von Fehler.

var dadosPost = $("<div />"); 
var fig = $("<figure />"); 
var img = $("<img />") 
      .attr("src", userPicture") 
      .attr("alt", "Images should have alt text"); 
var heading = $("<h3>").text(f.user.username); 
dadosPost.append(figure); 
figure.append(img); 
dadosPost.append(heading); 
dadosPost.append(f.date); 
dadosPost.append(f.content); 
$(".inner").prepend(dadosPost)

Quelle

2016-09-19 16:21:06 Quentin

Ja, das stimmt. Anfängerfehler! Vielen Dank dafür! –

Diese neue Art, Dinge an "dadosPost" anzuhängen, funktioniert leider nicht. Netbeans zeigen dies im Fehlerprotokoll an: "Uncaught SyntaxError: Unerwartetes Ende der Eingabe (14: 02: 21: 094 | Fehler, Javascript) at public_html/index.html: 60 Fehler beim Laden der Ressource: net :: ERR_EMPTY_RESPONSE (14: 02: 21: 127 | Fehler, Netzwerk) bei http: // localhost: 8383/favicon.ico > " –

Hey, ich bin nur dumm. Nochmals vielen Dank: D –

Bild wird nicht auf der Webseite mit HTML angezeigt

Antwort

Verwandte Themen