이미지가 HTML로 웹 페이지에 표시되지 않습니다

저는 HTML5와 조금 어려움을 겪고 있습니다. 웹 페이지에 이미지를 표시해야하지만 표시되지 않습니다. 마치 이미지가 존재하지 않는 것처럼 표시됩니다.이미지가 HTML로 웹 페이지에 표시되지 않습니다

<!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>

출처

2016-09-19 Vinícius Oliveira Barros

당신은 문자열의 URL과 그 변수의없는 내용으로 "userPicture"를 사용하는이 지금까지 내 코드입니다.

변수를 사용해야합니다.

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

더 나은 방법은 문자열을 결합하여 HTML을 형성하는 것입니다. 이런 종류의 오류를 읽기 쉽고 쉽습니다.

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)

출처

2016-09-19 16:21:06 Quentin

네, 맞습니다. 신기한 실수! 그 점에 대해 정말 고마워요! –

"dadosPost"에 추가하는 새로운 방법은 불행히도 작동하지 않습니다. 넷빈즈는 오류 로그에 표시 : "catch되지 않은 구문 에러를 : 입력의 예기치 않은 종료 (14 : 02 : 21 : 094 | 오류, 자바 스크립트) 에서 public_html을/index.html을 : 60 자원을로드하지 못했습니다 : 순 :: ERR_EMPTY_RESPONSE (14 : 02 : 21 : 127 | 오류, 네트워크) http : // localhost : 8383/favicon.ico > " –

안녕하세요, 저는 바보입니다. 다시 한 번 감사드립니다 : D –

이미지가 HTML로 웹 페이지에 표시되지 않습니다

답변

관련 문제