ReactJS Image from local resource
-
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;">
-
@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',
-
@munsterlander I’ve tried to acess from mobile_cart.js :
image: ‘image/cart/android.png’,
But no sucess! Yet!!!
-
@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.
-
@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:
-
@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.
-
@munsterlander
I guess the problem is exactly this. I’m working inside an Asp Net web Application .
-
@Leonardo-Augusto Hmmm, just an odd question or two:
- Have you tried putting an image in the same folder as the script just to see if it will load?
- What is the the script tag path in the index.html?
-
@munsterlander And to you see , i tried to use the same picture inside the js folder …and nothing
-
@munsterlander said:
@Leonardo-Augusto Hmmm, just an odd question or two:
- Have you tried putting an image in the same folder as the script just to see if it will load?
- What is the the script tag path in the index.html?
lol Yes!
-
@Leonardo-Augusto HA! We posted at the same time.
-
@munsterlander Yes … X MEN
-
<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
-
@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
-
@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 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:
-
@munsterlander Using a direct url
image: 'http://lorempixel.com/150/150/food',
Yes, it works! I guess i’ll keep the url lol
-
Lol Android app 13,20!!!
-
Welp as long as it works, I say! Sometimes you don’t have to know why, just that it worked.