reactjs，json，图片加载

Question

我是 reactjs 新手——我正在循环一个 json 对象——我正在尝试从 json 对象添加图像路径。

所以这就是它当前在组件中的硬编码方式。

import HowImage1 from '../../img/home/works_emp_01.png'

then in the component its rendered like this {HowImage1}

但在 json obj 中

        {
            "image" : "/img/home/works_emp_01.png"
        }

现在这是否失败了 - 因为我需要在将路径包含在组件中时对其进行包装？

---

好的 json 对象。

{
  "langs": [{
    "lang": "de",
    "lines": {
        "howTiles": [{
            "title": "So funktioniert die Zusammenarbeit",
            "subhead" : "Schreiben Sie Ihr Projekt in wenigen Sekunden aus",
            "items" : [
                {
                    "title": "Projekt ausschreiben", 
                    "description": "Schreiben Sie Ihr Projekt aus und zeigen Sie es einer handverlesenen Gruppe von Fachexperten",
                    "image" : "../../img/home/works_emp_01.png"
                },
                {
                    "title": "15 Minuten Video-Gespräch", 
                    "description": "Führen Sie eine unverbindliche Unterhaltung mit 3 vorselektierten Anwälten",
                    "image" : "../../img/home/works_emp_01.png"
                },
                {
                    "title": "Transparente Zusammenarbeit", 
                    "description": "Erhalten Sie einen bindenden Kostenvoranschlag und arbeiten Sie online zusammen",
                    "image" : "../../img/home/works_emp_01.png"
                }
            ],
            "button": {"title": "Kostenlose Angebote erhalten", "url": "/de/projekt-ausschreibung"}
        }]
    },
    "pageURL": "/de/dienstleistungen",
    "urls":  {
      "servicePages": [{"Medienrecht":"/medienrecht"},{"Medienrecht":"/medienrecht"}],
      "otherPages": [{"other_page1": "other page"},{"other_page2": "other page 1"}]
    }
  }, {
    "lang": "en",
    "lines": {
        "howTiles": [{
            "title": "How it works",
            "subhead" : "Get started with your projects in a few seconds",
            "items" : [
                {
                    "title": "Post your project", 
                    "description": "Post your project privately to a cohort of qualified professionals",
                    "image" : "../../img/home/works_emp_01.png"
                },
                {
                    "title": "15 minute video interviews", 
                    "description": "Have 3 non-binding interviews with pre-sected lawyers",
                    "image" : "../../img/home/works_emp_01.png"
                },
                {
                    "title": "Transparent collaboration", 
                    "description": "Receive a fixed price quote and work online",
                    "image" : "../../img/home/works_emp_01.png"
                }
            ],
            "button": {"title": "Get free quotes", "url": "/en/project-post"}
        }]
    },
    "pageURL": "/en/services",
    "urls":  {
      "servicePages": [{"Medienrecht":"/medienrecht"},{"Medienrecht":"/medienrecht"}],
      "otherPages": [{"other_page1": "other page"},{"other_page2": "other page 1"}]
    }
  }]
}

react 组件.. 索引上也有错误 === 0 ？部分“错误'？'应该放在行首 operator-linebreak"

import React from 'react'
import HowImage1 from '../../img/home/works_emp_01.png'
import HowImage2 from '../../img/home/features_emp_icon_15.png'
import HowImage3 from '../../img/home/about_us_icon_03.png'

const HowTiles = (props) => {
  const lang = props.lang

  return (
    <section className='border__transparent--top background--white grid__row--offset--120'>
      <header>
        <div className='row grid__row--offset--50'>
          <div className='small-58 medium-55 large-40 small-centered columns'>
            <h1 className='text--center--small text--center smooth-font'><font><font className=''>{lang.howTiles[0].title}</font></font></h1>
          </div>
        </div>
        <div className='row grid__row--offset--5'>
          <div className='small-55 medium-45 small-centered columns'>
            <h2 className='text--center text--center smooth-font'><font><font>{lang.howTiles[0].subhead}</font></font></h2>
          </div>
        </div>
        <div className='row grid__row--offset--30'>
          <div className='small-58 medium-55 small-centered columns hor-line--thin--dark-grey'>&nbsp;</div>
        </div>
      </header>

      <div className='row grid__row--offset--50'>
        <div className='small-55 medium-58 large-58 small-centered columns background--white--small border__transparent--top'>
          <div className='small-60 columns grid__row--offset--30 show-for-small-only'>&nbsp;</div>
          <div className='small-45 medium-20 small-centered medium-uncentered columns'>
            <div className='row'>
              <div className='small-60 medium-45 small-centered columns'>
                <div className='relative-container'>
                  <img className='centered' src={HowImage1} style={{maxWidth: '50%', marginLeft: '25%'}} />

                  <h3 className='text--bold text--center'><font><font>Project</font></font></h3>
                  <p className='text--center text--font-size-14'><font><font>Write out your project and show it to a hand-picked group of experts</font></font></p>
                </div>
              </div>
            </div>
            <div className='grid__row--offset--40 row'>
              <div className='small-40 columns small-centered'>
                <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
                <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a>
              </div>
            </div>
          </div>
          <div className='small-60 grid__row--offset--40 show-for-small-only'>&nbsp;</div>
          <div className='small-45 medium-20 small-centered medium-uncentered columns'>
            <div className='row'>
              <div className='small-60 medium-45 small-centered columns'>
                <div className='relative-container'>
                  <img className='centered' src={HowImage2} style={{maxWidth: '50%', marginLeft: '25%'}} />

                  <h3 className='text--bold text--center'><font><font>15 minutes of video conversation</font></font></h3>
                  <p className='text--center text--font-size-14'><font><font>Conduct a non-committal conversation with 3 preselected attorneys</font></font></p>
                </div>
              </div>
            </div>
          </div>
          <div className='small-60 grid__row--offset--40 show-for-small-only'>&nbsp;</div>
          <div className='small-45 medium-20 small-centered medium-uncentered columns'>
            <div className='row'>
              <div className='small-60 medium-45 small-centered columns'>
                <div className='relative-container'>
                  <img className='centered' src={HowImage3} style={{maxWidth: '50%', marginLeft: '25%'}} />

                  <h3 className='text--bold text--center'><font><font>Transparent cooperation</font></font></h3>
                  <p className='text--center text--font-size-14'><font><font>Get a binding quote and work together online</font></font></p>
                </div>
              </div>
            </div>
            <div className='row grid__row--offset--70 show-for-small-only'>&nbsp;</div>
          </div>
          <div className='medium-60 columns grid__row--offset--30'>&nbsp;</div>
        </div>
        <div className='row grid__row--offset--80'>&nbsp;</div>
      </div>

      <div className='row grid__row--offset--50'>
        <div className='small-55 medium-58 large-58 small-centered columns background--white--small border__transparent--top'>
          {
            lang.howTiles[0].items.map(function (item, index) {
              return (
                <div key={index}>
                  <div className='small-60 columns grid__row--offset--30 show-for-small-only'>&nbsp;</div>
                  <div className='small-45 medium-20 small-centered medium-uncentered columns'>
                    <div className='row'>
                      <div className='small-60 medium-45 small-centered columns'>
                        <div className='relative-container'>
                          <img className='centered' src={item.image} style={{maxWidth: '50%', marginLeft: '25%'}} />

                          <h3 className='text--bold text--center'><font><font>{item.title}</font></font></h3>
                          <p className='text--center text--font-size-14'><font><font>{item.description}</font></font></p>
                        </div>
                      </div>
                    </div>
                    {
                      index === 0 ?
                        <div className='grid__row--offset--40 row'>
                          <div className='small-40 columns small-centered'>
                            <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
                            <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a>
                          </div>
                        </div>
                      : null
                    }
                  </div>
                </div>
              )
            })
          }

          <div className='medium-60 columns grid__row--offset--30'>&nbsp;</div>
        </div>
        <div className='row grid__row--offset--80'>&nbsp;</div>
      </div>

      <div className='medium-60 columns grid__row--offset--30'>&nbsp;</div>
      <div className='row grid__row--offset--80 show-for-small-only'>&nbsp;</div>
    </section>
  )
}

HowTiles.propTypes = {
  lang: React.PropTypes.object.isRequired
}

export default HowTiles

Answer 1

而不是导入图像导入竞争 json 并循环。

import HowImage1 from '../jsonpath'

然后循环这个json，从中获取图片url。

class Application extends React.Component {
 constructor(){
   super();
   //loop your json here and create json
 }

  render() {
    return <div>
      // use that variable here
    </div>;
  }
}