Question

我试图使用图像作为导航栏中链接的下方文本，但由于某种原因，我在绘制空白图片时如何使用React将图像标签放入锚定标签中。 React大喊我需要一个对应的结束标签来显示图像，但是有一个。我知道这很简单，但是对我来说，生命并没有来到我身边。

我尝试用/>关闭它，并将整个div包装在React片段中。

import React from 'react'

const Navbar = () => {
    return (
        <div>
            <nav>
                <ul>
                    <li><a href="/"></a><img src="someimage.png" alt="some image"></a>/></li>
                </ul>
            </nav>
        </div>
    )
}

export default Navbar

Answer 1

您两次关闭anchor标签，

<li><a href="/"></a><img src="someimage.png" alt="some image"></a>/></li>

正确的语法是

<li><a href="/"><img src="someimage.png" alt="some image" /></a></li>

这也行不通，您需要对图像执行此操作，

import someimage from './someimage.png'; //considering image in same folder, if image is in another folder put the correct path here

<li><a href="/"><img src={someimage} alt="some image" /></a></li>

或者使用图像的另一种方法是，如果使用webpack

<li><a href="/"><img src={require("./someimage.png")} alt="some image" /></a></li> //make sure image pathis correct

如果您仍然不使用webpack，则需要将图像路径包装在{}中，

<li><a href="/"><img src={"./someimage.png"} alt="some image" /></a></li> //make sure image pathis correct

Reference

Answer 2

您的语法不太正确。

此：

<li><a href="/"></a><img src="someimage.png" alt="some image"></a>/></li>

应该是这样

<li><a href="/"><img src="someimage.png" alt="some image" /></a></li>

在JSX的锚标签中使用图片标签

2 个答案: