无法使用 React JS 显示图像

Question

我开始使用 React JS，其中包含显示图片的代码、header 标签和有序列表。这是 JS 代码：

import React from 'react'
import ReactDOM from "react-dom"
const test = (
    <div>
        <img src="./balloons.png" width="100px" alt=""/>
        <h1>Names</h1>
        <ol>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ol>
    </div>
)

ReactDOM.render(test,document.getElementById("root"))

这是 index.html 部分：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id = "root"></div>
        <script src = "index.pack.js"></script>
    </body>
</html>

现在，代码运行并在 React 应用程序中显示类似这样的输出。我上传的图片看不到了

下面是 VS Code 中的文件夹排列，如果有帮助的话：

提前致谢！

Answer 1

如果将图像保存在 public 文件夹中，它可以正常工作

Answer 2

尝试导入图片并像这样在 src 中使用它：

import React from 'react'
import ReactDOM from "react-dom"
// try to import image
import YourImageUrl from './balloons.png';

const test = (
    <div>
        <img src="{YourImageUrl}" width="100px" alt=""/>
        <h1>Names</h1>
        <ol>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ol>
    </div>
)

ReactDOM.render(test,document.getElementById("root"))

Answer 3

您需要先导入图像。 js代码这样写

import React from 'react'
import ReactDOM from "react-dom"
import balloons from './balloons.png'
const test = (
    <div>
        <img src={balloons} width="100px" alt=""/>
        <h1>Names</h1>
        <ol>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ol>
    </div>
)

ReactDOM.render(test,document.getElementById("root"))

无法使用 React JS 显示图像

Unable to display an image using React JS

html

javascript

image

reactjs

visual-studio-code