React dynamic array in imgs

Question

React dynamic array in imgs

Navigation

#1 by (2 votes)

0

I have the following function create dynamic array.

funcListMap(_ref) {		
		let list = [];
		_ref.map((i) => {
			list.push(
					<ListItem key={i.id}>
						<h1>{i.id}</h1>
						<span>{i.descricao}</span>
						<img src={require(''${i.img}'')} />
						<span>{i.valor}</span>
					 </ListItem>
			)
		})
		return (list);
	}

Only you are giving an error when loading the image

<Img src={require(''${i.img}'')} />
// Ou se tentar assim
<Img src={require(i.imagens)}/>

But if I put one in the way the form works manually, that is, it loads the same image for everyone.

<Img src={require('../statics/imagens/sanduiches/sanduiche-01.png')} />

How to resolve the issue in this code

<Img src={require(''${i.img}'')} /> ou <Img src={require(i.imagens)}/>

javascript react

asked by anonymous 21.10.2017 / 02:32

1 answer

Installation Cartopy Best HTML library for Android Studio [closed]

score 2 · Answer 1

No need to use require see this simple example:

let Carros = [
  {
    id: 1,
    descricao: 'Fiat Toro',
    img: 'http://www.fiat.com.br/content/dam/fiat-brasil/desktop/produtos/modelos/226/versoes/22611X0/176.png'
  },
  {
    id: 2,
    descricao: 'Fiat Argo',
    img: 'http://argo.fiat.com.br/modules/home/data/tablet/background.jpg'
  },
  {
    id: 3,
    descricao: 'Golf 2017',
    img: 'https://3.bp.blogspot.com/-bnzlXa1mIe0/WCXcyVh9aNI/AAAAAAAA1_g/xbgbYXeSCLQc7y5gXagH2SZhZW_SAtdzwCLcB/s1600/Novo-Golf-2017%2B%252815%2529.jpg'
  }
];
var Images = React.createClass({
  render: function() {
    return (
      <div>  {Carros.map(function(i){
              return (
              <div key={i.id}>
                <h1>{i.id}</h1>
                <span>{i.descricao}</span>
                <img src={i.img} width='120' />
                <span>{i.valor}</span>
              </div>
              );
      })}
  </div>
  )
}
                               });
ReactDOM.render(<Images />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>