我正在尝试显示属于json blob的图像。虽然努力动态生成图像。
{
"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/features_emp_icon_15.png"
},
{
"title": "Transparente Zusammenarbeit",
"description": "Erhalten Sie einen bindenden Kostenvoranschlag und arbeiten Sie online zusammen",
"image" : "../../img/home/about_us_icon_03.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/features_emp_icon_15.png"
},
{
"title": "Transparent collaboration",
"description": "Receive a fixed price quote and work online",
"image" : "../../img/home/about_us_icon_03.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"}]
}
}]
}
我能够在循环的顶部创建一个const图像 - 但是当我尝试将动态路径从json中输入时，它会失败。
{
lang.howTiles[0].items.map(function (item, index) {
const path = item.image;
const image = require('../../img/home/about_us_icon_03.png')
// const image = require(item.image)
// console.log('image', image)
console.log('path', path)
return (
<div key={index}>
<div className='small-60 columns grid__row--offset--30 show-for-small-only'> </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={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>
{
index === 0
? <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>
: null
}
</div>
</div>
</div>
)
})
}
//错误
HowTiles.js:277 Uncaught Error: Cannot find module "."
at webpackMissingModule (webpack:///./components/Services/HowTiles.js?:277:67)
at eval (webpack:///./components/Services/HowTiles.js?:277:145)
at Array.map (native)
at HowTiles (webpack:///./components/Services/HowTiles.js?:274:32)
at eval (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:306:16)
at measureLifeCyclePerf (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:75:12)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:305:14)
at ReactCompositeComponentWrapper._constructComponent (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:280:21)
at ReactCompositeComponentWrapper.mountComponent (webpack:///../~/react-dom/lib/ReactCompositeComponent.js?:188:21)
at Object.mountComponent (webpack:///../~/react-dom/lib/ReactReconciler.js?:46:35)
其他尝试
我是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"}]
}
}]
}
反应组件..也在索引上得到一个错误=== 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'> </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'> </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'> </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'> </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'> </div>
</div>
<div className='medium-60 columns grid__row--offset--30'> </div>
</div>
<div className='row grid__row--offset--80'> </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'> </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'> </div>
</div>
<div className='row grid__row--offset--80'> </div>
</div>
<div className='medium-60 columns grid__row--offset--30'> </div>
<div className='row grid__row--offset--80 show-for-small-only'> </div>
</section>
)
}
HowTiles.propTypes = {
lang: React.PropTypes.object.isRequired
}
export default HowTiles