ReactJS Image from local resource

[Leonardo Augusto]

Hello friends. How can i load an image from local resource with react js ?

var hardcodedProducts = [
	{
		id: 1,
		name: 'Product #1',
		image: 'http:// .......',
		category: 3,
		price: '13,20',
		in_cart: true,
		hidden: false,
     quantity: 1
	},
	{
		id: 4,
		name: 'Product #4',
		image: 'http:// .......',
		category: 4,
		price: '6,66',
		in_cart: false,
		hidden: false,
     quantity: 1
	},

<img class="products-list__item-image" src="{{image}}/{{id}}" />

I want to change the code above, to get the image from local folder … like in angular js code (Below)

“Image”: “Oven.png”

<img class="item-thumb" ng-src="images/{{Item.Image}}" style="margin:auto;">

[munsterlander]

@Leonardo-Augusto You should be able to just reference the relative path:

var hardcodedProducts = [
    {
        id: 1,
        name: 'Product #1',
        image: '/www/your/path/to/image',

[Leonardo Augusto]

@munsterlander I’ve tried to acess from mobile_cart.js :

image: ‘image/cart/android.png’,
But no sucess! Yet!!!

[munsterlander]

@Leonardo-Augusto Did you use: image: ‘/image/cart/android.png’? If that for some reason does not work, try: image: ‘…/image/cart/android.png’. The first one should work though.

[Leonardo Augusto]

@munsterlander said:

‘/image/cart/android.png

Do you believe that is not working? I’ve tried

‘/image/cart/android.png’
…/image/cart/android.png
and two other options :persevere:

[munsterlander]

@Leonardo-Augusto No, it had to do with your example missing the first / so I didn’t know if you were indexing outside the templates folder. For a different recent project, I was reading a text file and I had to do /www/my/path. I don’t know how VS does the pathing but try this:

var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript.src;
alert("loading: " + scriptName);

This will pop an alert with the full path for your script source, that should at least let you know what the path is to mobile_cart.js. Then we should be able to work back from there.

[Leonardo Augusto]

@munsterlander
I guess the problem is exactly this. I’m working inside an Asp Net web Application .

[munsterlander]

@Leonardo-Augusto Hmmm, just an odd question or two:

1. Have you tried putting an image in the same folder as the script just to see if it will load?
2. What is the the script tag path in the index.html?

[Leonardo Augusto]

@munsterlander And to you see , i tried to use the same picture inside the js folder …and nothing

[Leonardo Augusto]

@munsterlander said:

@Leonardo-Augusto Hmmm, just an odd question or two:

1. Have you tried putting an image in the same folder as the script just to see if it will load?
2. What is the the script tag path in the index.html?

lol Yes!

[munsterlander]

@Leonardo-Augusto HA! We posted at the same time.

[Leonardo Augusto]

@munsterlander Yes … X MEN

[Leonardo Augusto]

<img class=“products-list__item-image” src="/image/cart/{{image}}/{{id}}" />

I’ll try it now:

<img class=“products-list__item-image” src=“cart/{{image}}/{{id}}” />

And a folder (cart) inside js folder

[munsterlander]

@Leonardo-Augusto AH! Try just one . so: ‘./image/cart/android.png’. Also, this link says that you need to do a require. Sorry, React I have never used.

https://facebook.github.io/react-native/docs/images.html

Also, it seems there is a bug too:

http://stackoverflow.com/questions/33982426/react-native-relative-image-path-loading

[Leonardo Augusto]

@munsterlander said:

./image/cart/android.png
Nothing here !

I’m building a cart (To my web site) to users estimate the pricing to build apps!
So i have pictures of the features to add . Using an URL …ok , But how i have tried no no no

[Leonardo Augusto]

@munsterlander

I’m using this cart

http://codepen.io/torresandres/pen/EaxWXE

[munsterlander]

@Leonardo-Augusto So the pen works but on your site it doesn’t? I didn’t see anything not showing in the pen, it looks like its working or did I just miss it!? :smile:

[Leonardo Augusto]

@munsterlander Using a direct url

image: 'http://lorempixel.com/150/150/food',

Yes, it works! I guess i’ll keep the url lol

[Leonardo Augusto]

@munsterlander

Lol Android app 13,20!!!

[munsterlander]

Welp as long as it works, I say! Sometimes you don’t have to know why, just that it worked.