传递给 Reusable-Component 时的图像源 (src) 不会在 UI 中显示图像

Question

我在 React-Project 的public文件夹中添加了一个图像。 现在，当我想显示图像时 - 它显示在组件中，但如果我尝试传递它的 url 并在某些reusable component中显示图像 - 我发现该图像未显示在 UI 中。

有人可以帮我吗？

主页.js

import React, { Component } from 'react';
import Cards from './cards';

class Home1 extends Component {

  render(){
    return(
      <div>
        <img src="img/aishwarya.jpg" />
        <Cards title="Aishwarya" sourcelink="img/aishwarya.png" details="Miss World 1994" />
      </div>
    )
  }

}

export default Home1;

Cards.js

import React from 'react';
import './cards.css';

const Cards = (props) => {

  return (
    <div className="cardHolder">
      <div className="imageHolder">
        <img src={props.sourcelink} />
      </div>
      <div className="contentHolder">
        <h3>{props.title}</h3>
        <p>{props.details}</p>
      </div>
    </div>
  );

}

export default Cards;

Output：

Answer 1

使用webpack时，对于src下的图像，类似img/aishwarya.jpg的路径仅在构建期间可用。

您需要导入它，请参阅添加图像、Fonts 和文件：

import image from "./img/aishwarya.jpg";
console.log(image) // /aishwarya.84287d09.jpg

<img src={image} />
<img src={require("img/aishwarya.jpg")} />

请参阅工作示例：