如何使用下一个图像组件
如何使用下一个图像组件
提问于 2022-02-02 13:42:53
我上传图片到图像工具包，这样我就可以在我的项目中使用图像链接。我犯了错误，我不知道为什么。我彻底地跟踪了这些文件。下面是我的下一个配置文件
module.exports = {
images: {
domain: ['ik.imagekit.io'],
},
}下面是我用来存储图像的javascript文件，然后将它映射到另一个文件
const vondutch = [
{
id: '0',
name: 'Von dutch pink',
category: 'Shirts',
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
price: 30000,
rating: 4.5,
size: 10,
},
{
id: '1',
name: 'Von dutch blue',
category: 'Shirts',
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
price: 15000,
brand: 'Adidas',
rating: 4.0,
size: 10,
}
]
export default vondutch;下面是在下一个文件中使用上述文件中的图像的位置
<div class="slides">
<Image
id="slide-1"
class="imagesli"
src={image}
/>
<div>
<Image src={image1} />
</div>
<div id="slide-2">
<Image src={image2} />
</div>
<div id="slide-3">
<Image src={image3} />
</div>
<div id="slide-4">
<Image src={image4} />
</div>
<div id="slide-5">
<Image src={image5} />
</div>
</div>回答 1
Stack Overflow用户
发布于 2022-02-02 14:06:02
你可能想要映射你的元素
获取要设置的图像的所有URLS s数组。
var images = [url_1, url_2, url_3...]然后你应该
<div class="slides">
<Image
id="slide-1"
class="imagesli"
src={image}
/>
{images.map((url, index) => (
<div key={index} id={`slide-${index+1}`} >
<Image src={url} />
</div>
))}
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70956701
复制相关文章
相似问题
腾讯云开发者
