时间戳

首页 > 解决方案 > 使用 require react js 没有出现本地图像

javascript - 使用 require react js 没有出现本地图像

问题描述

我尝试使用 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

标签： javascriptreactjs

解决方案

请记住“ require返回一个对象，并且图像的路径可以从其默认属性中弹出”。

因此，您必须更改以下代码：

<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}/>

祝你好运。

推荐阅读