CodeSandbox.io <img> 标签不加载图片。

Question

我一直在尝试使用 <img> tag 关于 CodeSandbox.io. 然而，每次我尝试添加它时，它都不显示，只是默认为 alt 标签（显示山）。

我正试图加载与该JS文件所在文件夹相同的图片。

下面是生成HTML的代码

function Navbar() {
  return (
    <navbar className="navbar">
      <div>
        <img src="business-landing-page-template-with-photo_52683-19539.jpg" alt="Mountain"/>
      </div>
    </navbar>
  )

谁能告诉我如何让图片加载。

Answer 1

如果在公共文件夹中，请使用相对于它的文件路径，即. src/img/image.jpg否则，如果源图像是在你的组件目录中，你就用 require 和相对路径。

给定的组件在 src/components 和形象是在 src/img

function Navbar() {
  return (
    <navbar className="navbar">
      <div>
        <img
          src={require("../img/business-landing-page-template-with-photo_52683-19539.jpg")}
          alt="Mountain"
        />
        // or in public
        <img
          src="src/img/business-landing-page-template-with-photo_52683-19539.jpg"
          alt="cat"
        />
      </div>
    </navbar>
  )
}