I tried to show images from Pinata IPFS in map function but it didn't load images dynamically.
myCards.map((element, index) => {
return (
<div key={ "card" + index }>
<h4>{ element.name }</h4>
<image src={element.pinata_image_path} width="400" height="400" />
</div>
)
})
So I tried to use require function but failed with an error.
<image src={require(`${element.ipfs_pin_hash}`) } width="400" height="400" />
Error: Cannot find module 'https://gateway.pinata.cloud/ipfs/QmYak9CFw4mhAwwuepygj5QXZ1dxgVJdiHAimUC8TXhh4N'
How can I show an image from Pinata?
Related
I want to show all images that are in nuxtjs, i used the strorage (Laravel ) to save the files
<img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
The link is as follows
http://localhost:3000/storage/example.jpg
but nothing show
I tested this before, Don't you think the problem could be from the controller?
public function index()
{
$files = scandir(storage_path('app/public/'));
$allFile = array_diff($files, ['.', '..', '.gitignore']);
return response()->json($allFile, 200);
}
The problem here is with the image path you need to specify where your image file exactly is, so you did most of its part like :src="'storage/' + row" but since your actual path to your image is something like http://localhost:8000/storage/example.jpg (the base URL of the Laravel app).
If both Laravel and Nuxt.js app serve under the same port and host
You need a leading slash in your src attribute to make an exact path.
<img v-for="(row, index) in files" :src="'/storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
If they are not serving on the same host and port
You have to declare an individual variable for your base URL, preferably in .env file and then refer to it and prepend it to your image src attribute.
So let's say we gonna define it in .env file, then it should be something like this:
//.env
BASE_URL=http://localhost:8000/
Then we will refer to it in our javascript data method (if that was not exists we will use default value as 'http://localhost:8000/').
data: function() {
return {
baseURL: process.env.BASE_URL || 'http://localhost:8000/ OR http://site.test/'
}
}
And in the last step we will prepend it to our image src attribute just like this:
<img v-for="(row, index) in files" :src="baseURL + 'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
I have my HTML:
<amp-list height="400" layout="fixed-height" src="data.json">
<template type="amp-mustache">
<amp-carousel height="200" layout="fixed-height" type="carousel">
<amp-img src="img/{{ imgSrc }}.jpg" layout="fixed" width="100" height="100" alt="{{ productName }}"></amp-img>
</amp-carousel>
</template>
</amp-list>
Which should display a carousel with the product images I've specified within the data.json file. However, if you take a look at my page here, it isn't functioning as I'd expect. I tried removing the dynamic functions and it works as expected, so something with the <amp-list> is confusing it. I followed the issues on the AMP Project GitHub: here, here, and here.
Here's what the component should look like:
https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fcomponents%2Famp-carousel%2Fsource%2F&mode=Responsive
And here's what it looks like currently:
https://www.perfectimprints.com/amp/product/offering-buckets/
Any insights would be much appreciated. Thanks!
They key is to use the amp-list in single-item mode and then manually iterate over the different items:
<amp-list width="325" height="325" layout="fixed" single-item src="/items.json">
<template type="amp-mustache">
<amp-carousel type="slides" layout="fill">
{{#items}}
<amp-img src="{{src}}" layout="fill" alt="{{alt}}"></amp-img>
{{/items}}
</amp-carousel>
</template>
</amp-list>
Another trick is to let the amp-list define the layout and then use the fill layout for carousel and images.
I got some solution for it.
{
items: [
{
values: [
{
category:"cate1",
image_link: "url1",
},
{
category:"cate1",
image_link: "url2",
},
{
category:"cate1",
image_link: "url3",
},
{
category:"cate1",
image_link: "url4",
},
]
}
]
}
above json data format we are getting from api.
if you does not has this format data from api then you have to chage to this format only.
<amp-list id="list_id" width="350" height="150" layout="flex-item"
src="api url">
<template type="amp-mustache">
<amp-carousel width="350" height="150" layout="fixed" type="carousel" autoplay delay="2000"
loop>
{{#values}}
<div role="text">
<amp-img src="{{image_link}}" layout="fixed" width="100" height="100" alt="{{title}}">
</amp-img>
<p class="category_label">{{category}}</p>
</div>
{{/values}}
</amp-carousel>
</template>
</amp-list>
above code for carousel.
it will display like above.
Thanks
Vishal
There is a workaround which you need to try.
amp-list expects an items array or object. For amp-carousel to work with amp-list and amp-mustache, you need to structure your response like this.
{"items": [{
"values": [/*...*/]
In your html code do this,
<amp-list height="400" layout="fixed-height" src="data.json">
<template type="amp-mustache">
<amp-carousel height="400" layout="fixed-height" type="carousel">
{{#values}}
<amp-img src="img/{{imgSrc}}.jpg" layout="fixed" width="100" height="100" alt="{{productName}}"></amp-img>
{{/values}}
</amp-carousel>
</template>
</amp-list>
If your arrows are disappearing, then you need to add controls attribute to amp-carousal.
<amp-carousel height="400" layout="fixed-height" type="carousel" controls>
.
.
</amp-carousel>
i can't display the image in my website, which is fetched from the API.
this is my image fetching/showing code.
this.state.filteredData.map((data,i) =>
<div>
<span>{data.details.name}</span>
<br/ >
<img source={{uri:data.details.image}} style={aStyle} />
<br/>
<span>{data.details[ 'section of law' ]}</span>
<br />3
<span>{data.details[ 'type of person' ]}</span>
</div>
const aStyle={
width:300,
height:360
};
only image box is showing.
<img src={{uri:data.details.image}} style={aStyle} />
image has src attribute and you can pass image url string or base64 image data to it.
<img src={data.details.image} style={aStyle} />
I am new to react and I want to display array of images in react webpage. The array has statis number of images.
render: function() {
console.log("edit");
return (
<div>
<Button bsStyle="info" id="qslist" onClick={this.show}>View</Button>
<Button bsStyle="info" id="qslist" className="delete" onClick={this.handleDelete}>Delete</Button>
<Button bsStyle="info" id="qslist" className="disable" onClick={this.handleDisable}>Disable</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title></Modal.Title>
</Modal.Header>
<Modal.Body>
<div id="formdata1">Name:<b>{name}</b></div>
<div id="formdata1">User:<b>{user}</b></div>
<div id="formdata1">Radius:<b>{radius}</b></div>
<div id="formdata1">Status:<b>{status}</b></div>
<div id="formdata1">Type:<b>{type}</b></div>
<div id="formdata1">Latitude:<b>{lat}</b></div>
<div id="formdata1">Longitude:<b>{long}</b></div>
<div id="formdata1">Description:<b>{caption}</b></div>
<div id="formdata1">Schedule:<b>{schedule}</b></div>
<div id="formdata1">Duration:<b>{duration}</b></div>
<div id="formdata1">lshare:<b>{lshare}</b></div>
<div id="formdata1">Id:<b>{listingid}</b></div>
<Image src={imgs} rounded />
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close} bsStyle="info" id="solbutton">Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
in the above code in image i am trying to display array of images. Currently it is possible to display only one image <Image src={image} rounded/>. How to display many number of images. The array images are in
[
'http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg',
'http://wallpaper-gallery.net/images/image/image-13.jpg',
...
]
If you just want to display an array of images (for whatever reason), you can do the following:
In the beginning of the render method (next to the console log) add this:
var images = imgs.map(function(image) {
return (<Image src={image} rounded />);
});
This will map your paths array into an array of Image components (where imgs is an array of paths like you specified).
Then, replace
<Image src={imgs} rounded/>
With
{images}
And that's it.
In case you want some kind of carousel, there are a number of packages available (example), where you can just define something like:
<ImageGallery items={imgs} />
This is the xml response from last fm:
<lfm status="ok">
<artist>
<name>Adele</name>
<mbid>1de93a63-3a9f-443a-ba8a-a43b5fe0121e</mbid>
<url>http://www.last.fm/music/Adele</url>
<image size="small">http://userserve-ak.last.fm/serve/34/71796928.png</image>
<image size="medium">http://userserve-ak.last.fm/serve/64/71796928.png</image>
<image size="large">http://userserve-ak.last.fm/serve/126/71796928.png</image>
<image size="extralarge">http://userserve-ak.last.fm/serve/252/71796928.png</image>
<image size="mega">http://userserve-ak.last.fm/serve/_/71796928/Adele+PNG.png</image>
...
I'm trying to echo that large image, but it doesn't return anything...
<?php
$xml = simplexml_load_file("http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=ARTISTNAME&api_key=b25b959554ed76058ac220b7b2e0a026");
$largeimg = $xml->artist->image['large'];
echo '<img src="'.$largeimg.'" />';
?>
If I just put $largeimg = $xml->artist->image; it just grabs that first image (small one). Any idea how I can fix this?
Use PHP's children() function to get the artist node's children:
$artistTag= $xml->artist->children();
$largeImage = $artistTag[5]; // 5 is the index of the Large Image child