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

Question

我正在尝试变得更加“动态”，尝试使用组件等。我将多个值传递给“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（未找到）”。我也在尝试添加这样的徽标：

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

也无济于事

Answer 1

您遇到的问题可能是由于图像路径不正确造成的。在 React 组件中为图像指定

src

属性时，提供图像资源的正确路径非常重要。以下是一些可帮助您解决问题的步骤：

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

   • 确保图像文件位于相对于组件文件的正确目录中。
   • 验证您提供给

     img

     属性的路径是否相对于组件的位置。

   例如，如果您的

   AdminKacheln

   组件与

   IonLearning

   目录位于同一目录中，则可能需要使用如下相对路径：

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

2. 公共文件夹（推荐）：在 Create React App 项目中（假设您使用的是 CRA），通常的做法是将图像等静态资源存储在项目的

   public

   目录中。这允许您使用绝对路径来引用这些资源。
   • 将您的

     images

     目录移动到

     public

     目录（如果尚不存在）。

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

   img="/images/review.png"
   

3. 导入图像：在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

目录中。使用图像的导入变量还可以更轻松地以结构化方式管理和引用您的资产。