使用 require react js 不顯示本地圖像

Question

我嘗試使用 require 動態獲取圖像的目錄但不起作用

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


function Produto({data}) {

    const { id, name, price, score, image } = data;

    return <div className = 'produto-card-container' key = {id}>

        <div className = 'produto-card-flex'>
            <img alt = {image} src = {require(`../../Assets/${image}`)}/>
         
        </div>
    </div>
}

export default Produto;

但在我的頁面中，圖像看起來像這樣

我試圖控制路徑和圖像名稱以查看發生了什么 我的 const 圖像控制台日志

super-mario-odyssey.png
produto.js:8 call-of-duty-infinite-warfare.png
produto.js:8 the-witcher-iii-wild-hunt.png
produto.js:8 call-of-duty-wwii.png
produto.js:8 mortal-kombat-xl.png
produto.js:8 shards-of-darkness.png
produto.js:8 terra-media-sombras-de-mordor.png
produto.js:8 fifa-18.png
produto.js:8 horizon-zero-dawn.png

Answer 1

有必要指出圖像的類型。 在您的情況下，它是一個 png。

 <img alt = {image} src = {require(`../../Assets/${image}.png`)}/>

Answer 2

請記住“ require返回一個 object 並且圖像的路徑可以從其默認屬性中彈出”。

因此，您必須更改以下代碼：

<img alt = {image} src = {require(`../../Assets/${image}`)}/>

到：

<img alt={image} src={require(`../../Assets/${image}.png`).default}/>

注意：如果您想使用多種圖像格式，請將imageFormat鍵添加到您的 json 數據庫並將其值作為道具傳遞。

{
    ...
    image: 'assassins-creed',
    imageFormat : 'jpg'
}

所以如果你這樣做，你的代碼必須是這樣的：

const {id, name, price, score, image, imageFormat} = data;

<img alt={image} src={require(`../../Assets/${image}.${imageFormat}`).default}/>

祝你好運。