laravel 什么问题导致我的图像无法加载？

kknvjkwl 于 2023-10-22 发布在其他

关注(0)|答案(1)|浏览(129)

我正试图变得更“动态”一点，玩弄组件等。我正在向'AdminKachel'传递多个值，其中一个是图像。我正在尝试将路径传递到项目中的图像，但图像未显示。服务器只是给了我一个404的图像，我通过。我尝试使用相对路径和绝对路径。我的错在哪里？
下面是AdminKachel组件：

const AdminKacheln = ({ description, description1, link, img, className, alt }) => {
    if (className === 'box borderBottom') {
        return (
            <div className={className}>
                <div className="box-content">
                    <p className="pb-2">{description}</p>
                    <p>{description1}</p>
                    <p><a href={link}>Zur Übersicht</a></p>
                </div>
                <div className="imgContainer">
                    <img src={img} alt={alt}/>   // <------  Is this wrong?
                </div>
            </div>
        );
// more stuff

这里是我传递值的地方：

<AdminKacheln
                    description="Es haben X von X ionen ausstehende Unterweisungen"
                    link="Your Link"
                    className="box borderBottom"
                    img="IonLearning/resources/images/review.png"
                />

我尝试改变路径，删除和重新添加图像，并尝试不同的图像类型。我得到了一个“无法获取资源”错误，或者“GET http：//localhost：8000/images/ion2s.png 404（Not Found）”。我也想添加一个这样的logo：

<section className="logo">
                <img src="../../images/ion2s.png"/>
            </section>

也无济于事

laravel

来源：https://stackoverflow.com/questions/77263752/what-issue-is-causing-my-images-not-to-load

1条答案

按热度按时间

ckx4rj1h1#

您遇到的问题可能是由于不正确的图像路径。在React组件中为图像指定src属性时，提供图像资源的正确路径非常重要。以下是帮助您解决此问题的一些步骤：

***相对路径：**如果您对映像资源使用相对路径，请确保路径相对于导入和使用映像的组件文件的位置。在您的情况下，似乎图像路径可能不正确。

确保图像文件位于组件文件的正确目录中。
验证您提供给img属性的路径是否相对于组件的位置。

例如，如果AdminKacheln组件与IonLearning目录位于同一目录中，则可能需要使用如下相对路径：

img="IonLearning/resources/images/review.png"

***Public Folder（推荐）：**在Create React App项目中（假设您使用CRA），通常的做法是将静态资产（如图像）存储在项目的public目录中。这允许您使用绝对路径来引用这些资源。

将images目录移动到public目录（如果还没有）。

您的图像路径应该如下所示：

img="/images/review.png"

***导入图像：**在React中处理图像的另一种方法是直接在组件文件的顶部导入它们，并使用导入的变量作为图像源。这对于动态生成的路径尤其有用。

范例：

// Import the image at the top of your component file
import reviewImage from 'path-to-your-image.png';

// Use the imported image variable in your component
// ...
<img src={reviewImage} alt={alt} />
// ...

请仔细检查镜像文件的路径，并确保它们相对于组件位于正确的位置，或者如果您使用的是Create React App，则位于public目录中。为图像使用导入的变量还可以更轻松地以结构化的方式管理和引用资源。

赞(0）回复(0）举报 2023-10-22

我来回答

laravel 什么问题导致我的图像无法加载？

1条答案

相关问题

热门标签

最新问答