Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

React in Image Source src {data}

19.02.2021 (👁4658)

 

 

Problem:

React setzt die Ausgabe als Text ein

<img src="{article.imagePath}" alt="{article.title}"

 

Erzeugt in der HTML Ausgabe im Browser

<img src="{article.imagePath}" alt="Kontakt Adresse Email Telefon" class="list_img">

 

 

Lösung in React

Man muss in React keine Hochkommas einfügen sondern nur den React-Klammer{..} Ausdruck, denn die Hochkommas werden durch den Compiler automatisch eingefügt

Richtig:

<img src={article.imagePath} alt={article.title} class="list_img" />

 

 

Solution: React.js Code

    //========< Fill HTML >======

    static renderTable(articles) {

        return (

            <div id="divMain_List" class="list_Div_Main" >

                {articles.map(article =>

                    <div class="list_Div_Row">

                        <a href="{article.title}" title="" class="list_href">

                            <div class="list_folder">{article.folder}</div>

                            <div class="list_title">{article.title}</div>

                            <div class="list_div_img">

                                <img src={article.imagePath} alt={article.title} class="list_img" />

                            </div>

                            <div class="list_div_text">

                                {article.textContent}

                            </div>

                        </a>

                    </div>

                )}

            </div>

        );

    }

    //========</ Fill HTML >======

 

 

Korrekt nach React Ändrung