HTML, JSON의 이미지 소스를 동적으로 변경

Mohinish

Firebase 데이터베이스의 JSON 데이터를 사용하여 CSS 카드를 만들려고했습니다. 주요 아이디어는 Firebase의 데이터를 사용하는 것입니다. 양식에서 제출할 때마다 CSS 카드를 만들려고합니다.

양식 제출 중에 사용자는 자신이 속한 카테고리를 선택하고 특정 이미지가 CSS 카드에 표시되어야합니다.

CSS 카드가 동적으로 생성되므로 전체 HTML 코드는 JS를 사용하여 빌드됩니다.

먼저 Firebase에서 데이터를 가져오고 함수를 호출하여 CSS 카드를 만드는 코드입니다.

let reference = firebase.database().ref("data-block");
reference.on("value",gotData);

이제 CSS 카드 생성 기능을 확인하십시오.

function gotData(data) {
    let x = data.val();
    let keys = Object.keys(x);
    console.log(keys.length);
    var q = 0;
    for (let i = 0; i < keys.length; i++) {

        let a = keys[i];

        let title_a = expens[a].Entry;
        let category_a = expens[a].Category;

        console.log(title_a, category_a);

        let expense = document.querySelector(".card-list");

        expense.innerHTML += `

        <article class="card">
        <header class="card-header">

        <h2>${title_a} </h2>
        </header>

        <div class="card-author">
            <a class="author-avatar" href="#">
                <img id="x" src=""/>
            </a>

            <svg class="half-circle" viewBox="0 0 106 57">
                <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
            </svg>

            <div class="author-name">
                <div class="author-name-prefix">Author</div>
                ${category_a}
            </div>

        
        </article>
        
    `;
    }
}

보시다시피 이미지의 src는 선언되지 않았습니다. 데이터베이스에서 가져온 카테고리에 따라 다른 이미지를 할당하는 방법을 알 수 없었기 때문입니다.

3 개의 이미지가 있습니다.

shopping.png
food.png
learn.png

Firebase의 데이터를 기반으로 이미지 태그에 src를 동적으로 할당하는 방법을 도와주세요.

Kostas
function getImageByCategory(category) {
  if (category == 'shopping') {
    return '<img src="shopping.png" />';
  } else if (category == 'food') {
    return '<img src="food.png" />'
  } else if (category == 'learn') {
    return '<img src="learn.png" />'
  }
}

`
<a class="author-avatar" href="#">
  ${getImageCategory(category_a)}
</a>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Gridview의 데이터 소스를 동적으로 변경

분류에서Dev

ID가 동적으로 변경되는 이미지 (img)의 '소스'값 찾기

분류에서Dev

jQuery가 동적으로 생성 된 이미지의 이미지 소스 속성을 변경하지 않음

분류에서Dev

app.component의 HTML 요소를 동적으로 변경

분류에서Dev

HTML의 기본 이미지 소스없이 자바 스크립트로 이미지 소스 변경

분류에서Dev

UITableViewAutomaticDimension을 사용하여 이미지의 tableViewCell 높이를 동적으로 변경

분류에서Dev

HTML의 jquery에서 동적으로 레이블 텍스트 변경

분류에서Dev

hover / mouseover html시 비디오 소스를 이미지 소스로 변경

분류에서Dev

Xamarin-이미지 소스를 동적으로 변경하는 방법?

분류에서Dev

wxpython : 배경 / 전경 이미지를 동적으로 변경

분류에서Dev

jquery로 동적으로로드 된 이미지의 src 변경

분류에서Dev

전단지의 아이콘 크기를 동적으로 변경

분류에서Dev

페이지로드 후 동적으로 HTML 삽입 (키를 누른 후 변경)

분류에서Dev

HTML의 슬라이더에 이미지를 동적으로 추가

분류에서Dev

동적으로 이미지 src 변경 자바 스크립트

분류에서Dev

이미지 크기를 동적으로 변경

분류에서Dev

PHP를 사용하여 동적으로 이미지 변경

분류에서Dev

이미지를 동적으로 변경할 수 없습니다.

분류에서Dev

Konvajs 이미지 src를 동적으로 변경하는 방법

분류에서Dev

if 문에서 이미지를 동적으로 변경

분류에서Dev

웹 사이트에서 동적으로 변경되는 이미지의 URL 스크랩

분류에서Dev

iOS Swift : 동적으로 변경된 레이블의 왼쪽에 이미지를 배치하는 방법

분류에서Dev

javascript를 사용하여 html 요소의 이미지 소스를 변경하는 방법

분류에서Dev

Android의 동적 목록에서 동적으로 이미지 변경

분류에서Dev

각도 js의 값에 따라 이미지를 동적으로 변경하는 방법

분류에서Dev

양식 HTML을 변경하지 않고 동적으로 입력 필드의 시각적 순서를 변경하는 쉬운 방법은 무엇입니까?

분류에서Dev

PHP 데이터베이스 값을 기반으로 HTML의 콘텐츠를 동적으로 변경하는 방법은 무엇입니까?

분류에서Dev

소스를 변경하기 위해 이미지를 동적으로 선택하는 문제

분류에서Dev

Angular 4 구성 요소에서 이미지 또는 HTML을 배경으로 동적으로 설정

Related 관련 기사

  1. 1

    Gridview의 데이터 소스를 동적으로 변경

  2. 2

    ID가 동적으로 변경되는 이미지 (img)의 '소스'값 찾기

  3. 3

    jQuery가 동적으로 생성 된 이미지의 이미지 소스 속성을 변경하지 않음

  4. 4

    app.component의 HTML 요소를 동적으로 변경

  5. 5

    HTML의 기본 이미지 소스없이 자바 스크립트로 이미지 소스 변경

  6. 6

    UITableViewAutomaticDimension을 사용하여 이미지의 tableViewCell 높이를 동적으로 변경

  7. 7

    HTML의 jquery에서 동적으로 레이블 텍스트 변경

  8. 8

    hover / mouseover html시 비디오 소스를 이미지 소스로 변경

  9. 9

    Xamarin-이미지 소스를 동적으로 변경하는 방법?

  10. 10

    wxpython : 배경 / 전경 이미지를 동적으로 변경

  11. 11

    jquery로 동적으로로드 된 이미지의 src 변경

  12. 12

    전단지의 아이콘 크기를 동적으로 변경

  13. 13

    페이지로드 후 동적으로 HTML 삽입 (키를 누른 후 변경)

  14. 14

    HTML의 슬라이더에 이미지를 동적으로 추가

  15. 15

    동적으로 이미지 src 변경 자바 스크립트

  16. 16

    이미지 크기를 동적으로 변경

  17. 17

    PHP를 사용하여 동적으로 이미지 변경

  18. 18

    이미지를 동적으로 변경할 수 없습니다.

  19. 19

    Konvajs 이미지 src를 동적으로 변경하는 방법

  20. 20

    if 문에서 이미지를 동적으로 변경

  21. 21

    웹 사이트에서 동적으로 변경되는 이미지의 URL 스크랩

  22. 22

    iOS Swift : 동적으로 변경된 레이블의 왼쪽에 이미지를 배치하는 방법

  23. 23

    javascript를 사용하여 html 요소의 이미지 소스를 변경하는 방법

  24. 24

    Android의 동적 목록에서 동적으로 이미지 변경

  25. 25

    각도 js의 값에 따라 이미지를 동적으로 변경하는 방법

  26. 26

    양식 HTML을 변경하지 않고 동적으로 입력 필드의 시각적 순서를 변경하는 쉬운 방법은 무엇입니까?

  27. 27

    PHP 데이터베이스 값을 기반으로 HTML의 콘텐츠를 동적으로 변경하는 방법은 무엇입니까?

  28. 28

    소스를 변경하기 위해 이미지를 동적으로 선택하는 문제

  29. 29

    Angular 4 구성 요소에서 이미지 또는 HTML을 배경으로 동적으로 설정

뜨겁다태그

보관