CodeSandbox.io< img>标签未加载图片 [英] CodeSandbox.io <img> tag not loading image

问题描述

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

I have been trying add an image using the <img> tag on CodeSandbox.io. However, every time I try to add it, it doesn't show and just defaults to the alt tag (Displays Mountain).

我试图将图像加载到包含此JS文件的文件所在的文件夹中。

I am trying to load an image in the same folder as the file in which this JS file is contained.

下面是生成HTML的代码

Below is the code which generates the HTML

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

有人可以告诉我如何

推荐答案

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

If in the public folder, use file path relative to it, i.e. src/img/image.jpg, otherwise, if the source image is in your component directories, you use require and relative path:

给出 src / components 和imag中的组件e在 src / img

Given component in src/components and image is in 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>
  )
}

这篇关于CodeSandbox.io< img>标签未加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！