时间戳

首页 > 解决方案 > 在对象中添加照片并显示它

javascript - 在对象中添加照片并显示它

问题描述

我需要你的帮助。我尝试插入带有照片对象的数组，擦除然后推断。我的代码没有错误，但它显示的不是照片，而是照片图标。我所有的照片都在 src 文件夹内的一个单独的文件夹中。告诉我我是否做得对，或者如何将照片插入对象然后将其删除？非常感谢你

Pizza.js

export let pizza_description = [
{ id: 1,
title: 'title 1',
image: 'bavarska.jpg'},

{ id: 2,
title: 'title: 2',
image: 'salami.jpg'}
]

Pizza_page

import React, {useState} from "react";
import {pizza_description} from "../Food_description/Pizza/Pizza";

export let Pizza_page = () => {

let [pizza, different_pizza] = useState(pizza_description)

return (<div>
{pizza.map(el => <div key={el.id}>
<img key={el.id} src={el.image}/>
<h1>{el.title}</h1>
</div>)}
        </div>)
}

标签： javascriptreactjs

解决方案

您必须导入图像或将它们放在公共目录中，然后像这样引用它们

return (<div>
 {pizza.map(el => <div key={el.id}>
    // assuming that el.image = image name + extension
    <img key={el.id} src={`/pizPhotos/${el.image}`}/>
    <h1>{el.title}</h1>
     </div>)
  }
   </div>)
 }

推荐阅读