React dynamic array in imgs

Question

React dynamic array in imgs

Asked 8 years ago

Viewed 1,659 times

0

I have the following function to 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 it is giving error in the time to load the image

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

But if I put one the way way manually works, ie load the same image for all.
```
<Img src={require('../statics/imagens/sanduiches/sanduiche-01.png')} />
```

How to resolve the issue of this code

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

You don’t need the require, just do <img src={i.img}/>

– NoobSaibot

2017/10/21 at 00:34
And why in one test you use i.img and in the other use i.images? What is the correct name?

– bfavaretto

2017/10/21 at 00:47
It’s because I was testing with other names, but I’m only using i.img anyway, when I’m going to pull a local image doesn’t work. Thus <img src={i.img} /> taking one from the web as http://siteany/image.png, funcinona, but your informing http://localhost/directory/image.png, does not work! does not load local image.

– Alexon da Silva Moreira

2017/10/22 at 16:17

1 answer

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.

by NoobSaibot • **9,554** points · Answer 1 · 2017-10-21T00:48:54+00:00

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