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

Posted 2023-02-19

【中文标题】CodeSandbox.io <img> 标签未加载图像

【英文标题】：CodeSandbox.io <img> tag not loading image

【发布时间】：2020-08-11 21:02:02

【问题描述】：

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

我正在尝试将图像加载到与包含此 JS 文件的文件相同的文件夹中。

下面是生成 html 的代码

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

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

【问题讨论】：

公用文件夹中有“business-landing-page-template-with-photo_52683-19539.jpg”吗？

抱歉，我上次的评论有误。不，它不在公用文件夹中。它位于一个名为 src 的单独文件夹中。这个 javascript 文件位于 src/components，我的图片位于 src/img

【参考方案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")
          
        />
        // or in public
        <img
          src="src/img/business-landing-page-template-with-photo_52683-19539.jpg"
          
        />
      </div>
    </navbar>
  )

【讨论】：

require 有什么作用？抱歉，我是 JS 新手。为什么会起作用？

如果动态上传图片会怎样？

@AwesomeGuy 老实说，我希望对这个问题有一个像样的答案，但这只是指定本地图像 src url 的方法。另一种选择是在文件顶部导入并直接使用，即import image from './business-landing-page-template-with-photo_52683-19539.jpg', then

@MattoMK 你是这个意思吗？ codesandbox.io/s/… 如果是这样，那么是的，你可以。

@MattoMK 我完全不知道。 Codesandbox 在 iframe (AFAIK) 中运行，因此有一些跨站点/域限制。似乎是另一个 SO 问题的好候选人；其他人可能比我研究它更快地为您提供答案。