傳遞給 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")} />

請參閱工作示例：