我没有看到我的图片，只有 alt 属性

Question

我不明白为什么我看不到我的图像，我的意思是我只看到 alt 属性而不是图片。 这是我的代码：

import React, {Component} from "react";

const Cards = (props) => {

    return (
        <>
            <div  id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                <div className="card-body">
                    <img src="test.jpg" width="200px" height="200px" className="card-img-top" alt="test" />
                    <h4 className="card-title">Description</h4>
                </div>
            </div>
        </>
    )
}

export default Cards;

而当我尝试这种修改时，它可以工作：

import React, {Component} from "react";
import logo from './test.jpg';

const Cards = (props) => {

    return (
        <>
            <div  id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                <div className="card-body">
                    <img src={logo} width="200px" height="200px" className="card-img-top" alt="test" />
                    <h4 className="card-title">Description</h4>
                </div>
            </div>
        </>
    )
}

我不明白为什么这不起作用。 对我来说，这条路很好。

请问你能帮帮我吗？

十分感谢 ！

Answer 1

每次图像无法正确加载时都会显示alt 。

因此，在您的情况下，后一个示例可以正常工作，因为logo实际上指向jpg图像，并且可以在没有alt字符串的情况下显示图像。 您共享的第一个示例不起作用，因为src没有实际的 pat，它只有一个未解析为图像的字符串，因此不会加载图像，浏览器将显示alt值。

Answer 2

在大多数情况下，图像（静态文件）应该存储在您的 /public 文件夹中。

您可以在公用文件夹中创建一个图像文件夹，然后设置src="/images/test.jpg"而不仅仅是“test.jpg”

Answer 3

你需要导入

在某些情况下，如果仍然无法正常工作，请按照我的描述检查config文件注意：需要安装file-loader package

import React, {Component} from "react";
import logo from './test.jpg';

const Cards = (props) => {

    return (
        <>
            <div  id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                <div className="card-body">
                    <img src={logo} width="200px" height="200px" className="card-img-top" alt="test" />
                    <h4 className="card-title">Description</h4>
                </div>
            </div>
        </>
    )
}

在配置文件中:: 确保定义了以下规则

module.exports = {
 // other config
 module: {
  rules: [
    // other rules
    {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader'
    },
  ]
 }
}```

Answer 4

这是因为 webpack 配置为使用 JSX 语法捆绑您的图像和资产。 {} 中的任何内容都可以视为组件的属性。 当它在 src 属性中时，它成为 src 和 webpack 的属性，而不知道该做什么。 如果您只是添加字符串，它会将源视为字符串而不是图像。 只有将路径从无意义的字符串转换为 object 时，路径本身才有意义。 您的第一种方法的替代方法可能是

<img src={require('/text.jpg')} />

这也应该有效。

Answer 5

试试这样：

<img src="./test.jpg" ...

如果图片在公用文件夹中，它应该可以工作。

Answer 6

答案是： <img src={require('./test.png').default} />