Html CodeSandbox.io<；img>；标签未加载图像

我一直在尝试使用

)

---

有人可以告诉我如何加载映像。

如果在公用文件夹中，请使用与其相关的文件路径，即

src/img/image.jpg

，否则，如果源映像位于组件目录中，则使用

require

和相对路径：

给定组件位于

src/components

中，图像位于

src/img

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

函数导航栏（）{
返回(
//或者当众
)
}

---

公用文件夹中是否有“business-landing-page-template-with-photo_52683-19539.jpg”？对不起，我上一次的评论有误。不，它不在公用文件夹中。它位于一个名为src的单独文件夹中。这个JavaScript文件位于src/components，我的图像位于src/imgWhat require do？抱歉，我是JS的新手。为什么这样做？如果图像是动态上传的呢？@AwesomeGuy老实说，我希望有一个像样的答案来回答这个问题，但这只是指定本地图像src URL的方法。另一个选项是将其导入文件顶部并直接使用，即从“/business-landing-page-template-with-photo_52683-19539.jpg”导入图像，然后@MattoMK您的意思是这样的吗？如果是这样的话，那么是的，你可以。@MattoMK，我一点也不知道。Codesandbox在iframe（AFAIK）中运行，因此有一些跨站点/域的限制。似乎是另一个SO问题的好人选；其他人可能会比我研究它更快地为你找到答案。

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>
  )
}