如何将图像从 JSON 检索到 React？

IT技术 html json reactjs
2021-05-02 06:03:34

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

我试着{photos.Lillian.portfolioImage}与JSON.stringify(photos.Annalise.portofolio然而，他们没有可以显示图片。我已经完成console.log();并检查了数据是否可以读取并且它确实出现了，但是图像不会出现。我已经检查了源地址，当我在这里添加它时它可以工作<img src="./img/TheGuardian/Lillian.png">。

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

这是我的 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;
2个回答

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

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'));

const obj = 

    { 
           "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" } 
    };

    let images = [];

    for(let item in obj){
       images.push(item.portfolioImage);
    }

通过这样做，您可以将对象的对象中的图像检索到图像数组中

其它你可能感兴趣的问题
上一篇React Flux - 来自通量调度器/商店的返回值 下一篇我可以使用循环来最小化 ES6 导入语句吗？