带有替换文字的图像显示损坏的图标答案

【问题标题】：Broken icon is displayed for the image with alt text带有替换文字的图像显示损坏的图标
【发布时间】：2021-03-02 12:48:45
【问题描述】：

我在src -> images -> image.jpg 中有一个名为 image.jpg 的图像。我的 React 应用程序上的图像有问题。我的代码运行良好，但在保存和加载应用程序时没有显示图像，没有显示图像，但损坏的图标显示为 alt 文本。怎么可能解决这个问题？

我试过的是：

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      names: [
        { name: "Deepak", job_profile: "Quality Analyst", description: "He is Passionate in Tester" },
        { name: "Deepinder", job_profile: "iOS Developer", description: "He is a Dedicated iOS Developer" }
      ],
      filteredData: [{}]
    };
  }

  render() {
    let terms = "";
    if (this.state.term) {
      terms = this.state.term.toLowerCase();
    }
    return (
      <div className="App">
        <label>Search Employee: </label>
        <input
          type="text"
          value={this.state.term}
          id="searchEmp"
          placeholder="Enter Name"
          onChange={(event) => {
            if (event.target.value.indexOf(" ") > -1) {
              alert("Please don\'t enter space.");
              this.setState({ term: "" });
              return;
            }
            this.setState({ term: event.target.value });
          }}
        />
        <br />
        <br />

        {this.state.names &&
          this.state.names
            .filter((x) => x.name.toLowerCase().startsWith(terms) || (x.description.toLowerCase().includes(terms)))
            .map((item) => {
              return (
                <div className="data-body">
                  <div>Name : {item.name}</div>
                  <div>Job Profile : {item.job_profile}</div>
                  <div>Description : {item.description}</div>
                  <div><img src={require('../src/images/image.jpg')} alt="profile_picture" /></div>
                  <input type="button" id="button" 
                  value="Delete" onClick={() => {
                  this.setState
                  ({ names: this.state.names.filter
                  (i => i.name !== item.name) });
                  }}/>
                  <div>{<br></br>}</div>
                </div>
              );
            })}
          </div>
          );
        }
}
export default App;

【问题讨论】：

我认为你需要检查图像是否存在或被正确引用
@Banny-我的代码好吗？我的意思是可能存在路径错误或图像存在。根据你的代码是对还是错。
您的代码看起来不错，您可以将图像放在公共文件夹中并像这样引用它们
希望一切顺利

标签： javascript reactjs

【解决方案1】：

我假设您正在使用 create-react-app 来捆绑您的项目。如果是这种情况，您只需将所有图像放在公共文件夹中，并在 src 属性中提及名称即可。

在提及图像来源时，您不需要 require 函数。

所以，你的代码应该是这样的：

<img src="image.jpg" alt="profile_picture"/>

如果您希望图像位于源目录的某个部分，您可以从那里导入图像并在代码中使用它，如下所示：

import Image from '../images/image.jpg'
<img src={Image} alt="profile_picture"/>

编辑

使用 ES5 语法，您可以执行以下操作：

const Image = require("../images/image.jpg")
<img src={Image} alt="profile_picture"/>

【讨论】：

@Near-您建议我尝试过的第二个，但我想使用required 显示图像。同样的，你能写下来吗？
@xKodian 我也用 ES5 语法更新了答案

【解决方案2】：

希望对您有所帮助

<div>
 <img src='../src/images/image.jpg' alt="profile_picture" />
</div>

【讨论】：