React - 解析错误：<img> 应有相应的 JSX 结束标记答案

【问题标题】：React - Parsing error: Expected corresponding JSX closing tag for <img>React - 解析错误：<img> 应有相应的 JSX 结束标记
【发布时间】：2019-12-08 16:37:12
【问题描述】：

尝试在我的 React 应用程序中使用 picture 元素作为响应式图像。但我得到这个错误：

解析错误：img
应有相应的 JSX 结束标记

                <section class='dd-image' data-ast-component='text' data-ast-separator='true' data-ast-title='some text' data-ast-desc='some text'>
                    <div class='image-wrapper'>
                        <picture class='cq-dd-image' data-ast-image-width='7676' data-ast-image-height='2399' data-ast-asset-path='test.jpg'>
                            <source media='unknown' srcset='./images/wallpaper-3840.jpg?imwidth=3840 3840w' data-srcset='./images/wallpaper-3840.jpg?imwidth=3840 3840w' data-rendition-width='3840' type='image/jpeg' >
                            <source media='unknown' srcset='./images/wallpaper-2880.jpg?imwidth=2880 2880w' data-srcset='./images/wallpaper-2880.jpg?imwidth=2880 2880w' data-rendition-width='2880' type='images/jpeg' >
                            <source media='unknown' srcset='./images/wallpaper-1920.jpg?imwidth=1920 1920w' data-srcset='./images/wallpaper-1920.jpg?imwidth=1920 1920w' data-rendition-width='1920' type='images/jpeg' >
                            <source media='(min-width: 1280px)' srcset='./images/wallpaper-1280.jpg?imwidth=1280 1280w' data-srcset='./images/wallpaper-1280.jpg?imwidth=1280 1280w' data-rendition-width='1280' type='images/jpeg' >
                            <source media='(min-width: 960px)' srcset='./images/wallpaper-960.jpg?imwidth=960 960w' data-srcset='./images/wallpaper-960.jpg?imwidth=960 960w' data-rendition-width='960' type='images/jpeg' >
                            <source media='(min-width: 640px)' srcset='./images/wallpaper-960.jpg?imwidth=640 640w' data-srcset='./images/wallpaper-640.jpg?imwidth=640 640w' data-rendition-width='640' type='images/jpeg' >
                            <source media='(min-width: 480px)' srcset='./images/wallpaper-960.jpg?imwidth=480 480w' data-srcset='./images/wallpaper-480.jpg?imwidth=480 480w' data-rendition-width='480' type='images/jpeg' >
                            <source media='(min-width: 384px)' srcset='./images/wallpaper-960.jpg?imwidth=384 384w' data-srcset='./images/wallpaper-384.jpg?imwidth=384 384w' data-rendition-width='384' type='images/jpeg' >
                            <source media='(min-width: 320px)' srcset='./images/wallpaper-960.jpg?imwidth=320 320w' data-srcset='./images/wallpaper-320.jpg?imwidth=320 320w' data-rendition-width='320' type='images/jpeg' >
                            <source media='(min-width: 240px)' srcset='./images/wallpaper-960.jpg?imwidth=240 240w' data-srcset='./images/wallpaper-240.jpg?imwidth=240 240w' data-rendition-width='240' type='images/jpeg' >
                            <source media='(min-width: 1px)' srcset='./images/wallpaper-960.jpg?imwidth=160 160w' data-srcset='./images/wallpaper-160.jpg?imwidth=160 160w' data-rendition-width='160' type='images/jpeg' > 
                            <img class='default-images loaded' src='./images/wallpaper-960.jpg?imwidth=960' alt='sample-image' data-src='./images/wallpaper-960.jpg?imwidth=960' loading='lazy' data-was-processed='true' > 
                        </picture>
                        <noscript>
                            <picture class='cq-dd-image' data-ast-component='image' data-ast-image-width='7676' data-ast-image-height='2399' data-ast-asset-path='test.jpg'> 
                              <img class='default-image' alt='sample-image' src='./images/wallpaper-960.jpg?imwidth=960' loading='lazy' > 
                            </picture>
                        </noscript>
                    </div>
                    <div class='text-over-image__body-wrapper' style='--background-gradient: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0.0) 82%, rgba(0,0,0,0) 100%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,0.0) 82%, rgba(0,0,0,0) 100%)'>
                        <div class='component__body text-over-image__body'>
                            <h2 class='text-over-image__headline'>Some sample text</h2>
                            <p class='text-over-image__text'>Some other text</p>
                            <div class='colour--palette-0 text-over-image__button-wrapper'>
                                <a href='#' class='text-over-image__button atomic--button-link' data-tracking='internal' data-tracking-link-location='text-over-image-promo' data-tracking-link-value='Read more'> <span class='atomic--button-link-wrapper'> <span class='atomic--button-link-label text-label'>Read more</span> </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

如何解决该解析错误？

【问题讨论】：

答案在错误中。在元素（以及与此相关的任何元素）的末尾应该是结束标记。所以它应该看起来像

标签： reactjs

【解决方案1】：

所有元素都应该有结束标签。您有多个没有关闭的元素。他们应该看起来像

<img (your attributes here)> </img>

或者用正斜杠自动关闭，像这样

<img (your attributes here) />

因此，以 <picture> 元素末尾的 <img> 元素为例，使用我上面描述的方法之一

<img class='default-images loaded' src='./images/wallpaper-960.jpg?imwidth=960' alt='sample-image' data-src='./images/wallpaper-960.jpg?imwidth=960' loading='lazy' data-was-processed='true' />

【讨论】：

【解决方案2】：

React 需要 img 元素的结束标记。这里有两种方法：

<img ...your code... />（注意/）
<img ...your code...></img>

【讨论】：