javascript 图像未显示

ffscu2ro 于 2023-01-01 发布在 Java

关注(0)|答案(4)|浏览(186)

我想在网页中显示图像，但未显示。仅显示alt文本。
这是我的代码：

return (
        <>
            <div className="container my-5">
                <div className="row justify-content-start">
                    <div className="col-4">
                        <form>
                            <div className="mb-3">
                                <label htmlFor="exampleInputEmail1" className="form-label">User name</label>
                                <input onChange={getUserName} value={userName} type="text" className="form-control" />
                            </div>
                            <div className="mb-3">
                                <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
                                <input onChange={getPassword} value={password} type="password" className="form-control" />
                            </div>
                            <button type="submit" onClick={checkCreds} className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                    <div className="col-8">
                        <img src="img1.png" alt="picture" />
                    </div>
                </div>
            </div>
        </>
    )

This is being showed

JavaScript

来源：https://stackoverflow.com/questions/74963806/image-not-showing

4条答案

按热度按时间

pkwftd7m1#

问题出在你的镜像src="img1.png"的链接上，你的镜像不在这个位置。检查你的浏览器控制台，你肯定会看到一个404错误，因为找不到镜像

赞(0）回复(0）举报 2023-01-01

o4hqfura2#

您可以检查开发者工具浏览器，查看加载图像时是否有任何错误。在Firefox中，请按Ctrl + Shift + e。

赞(0）回复(0）举报 2023-01-01

uqzxnwby3#

在html中有两种路径声明。它们是绝对的和相对的。在绝对路径中，例如如果我们传递一个URL，它将被认为是一个绝对路径。另一方面，在相对路径中，我们声明相对于我们的文件夹结构的路径。例如，如果我们的html文件和图像文件在同一个文件夹中，那么您的声明是可以的。相对声明取决于根。如果我们存储图片单向前进，这意味着从根文件夹下一个文件夹内，然后从根我们必须达到该文件夹通过给予正斜杠'/'.如果图像在根的前一个文件夹，然后我们必须返回，给出两个点和一个斜线'../'。2你将在下面的链接中得到每一个细节。检查你的图片文件夹的位置，并相应地声明。
如果一切正常，那么你可以声明根。'./'将介绍你正在从根搜索。