如何将图像从JSON检索到React中? [英] How do I retrieve images from JSON into React?

问题描述

我想使用JSON来检索我的图像及其文件位置.我的程序看起来像下面的代码.

I want to use JSON to retrieve my images along with their file location. My program looks like the code below.

我尝试使用{photos.Lillian.portfolioImage}和JSON.stringify(photos.Annalise.portofolio进行操作，但是它们都无法显示图像.我已经完成了console.log();并检查了是否可以读取数据并且它确实出现了，但是图像不会出现.我已经检查了源地址，并将其添加到此处<img src="./img/TheGuardian/Lillian.png">时可以使用.

I've tried with {photos.Lillian.portfolioImage} and with JSON.stringify(photos.Annalise.portofolio however, none of them can display the images. I've done a console.log(); and checked if the data can be read and it does appear however, the images will not appear. I've checked the source address and it works when I add it here <img src="./img/TheGuardian/Lillian.png">.

我的错误是什么?我是否需要重新格式化从JSON调用的对象?我见过可以使用parse和fetch，但是，这用于API，据我所知，不是吗?

What is my error? Do I need to reformat the object called from JSON? I've seen one can use parse and fetch however, this is used for APIs and as far as I can see, this isn't?

这是我的JSON:

{
  "Lillian" : {
    "type": "The Guardian",
    "portfolioImage": "./img/TheGuardian/Lillian.png"
  },
  "Annalise" : {
    "type": "TheGuardian",
    "portfolioImage": "./img/TheGuardian/Annalise.png"
  },
  "Raven" : {
    "type": "DCComics",
    "portfolioImage": "./img/TheGuardian/Raven.png"
  }
}

这是我的HTML:

import React, { Component } from 'react';
import logo from './logo.svg';
import photos from './images.json';
import './App.css';

class App extends Component {
  render() {
    console.log(JSON.stringify(photos.Annalise.portfolioImage));

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>beeccy´s portfolio.</h2>
        </div>
        <p className="App-intro">
          This was a test to present images from my portfolio.
        </p>
        <img src={photos.Lillian.portfolioImage} alt="Lillian" />
        <img src={photos.Raven.portfolioImage} alt="Raven" />
        <img src="JSON.stringify(photos.Annalise.portfolioImage)" alt="Annalise" />
      </div>
    );
  }
}

export default App;

推荐答案

就像HTML中一样，您想要将img元素的src属性设置为图像的来源.以下示例还显示了如何遍历JSON并一次显示所有图像.

Like in HTML, you want to set the src attribute of an img element the source to the image. The following example also shows how you can loop over the JSON and show all images at once.

const JSON = {
  Lillian: {
    type: 'The Guardian',
    portfolioImage: './img/TheGuardian/Lillian.png'
  },
  Annalise: {
    type: 'TheGuardian',
    portfolioImage: './img/TheGuardian/Annalise.png'
  },
  Raven: { type: 'DCComics', portfolioImage: './img/TheGuardian/Raven.png' }
};

class Example extends React.Component {
  render() {
    return (
      <div>
        {Object.keys(JSON).map(key => (
          <div>
            {JSON[key].type}
            <img src={JSON[key].portfolioImage} key={key} />
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

这篇关于如何将图像从JSON检索到React中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！