[英]How can I load external images in Next.js?
JavaScript and I am loading random images from https://picsum.photos but it is not working. JavaScript 我正在从https://picsum.photos加载随机图像,但它不起作用。 Note that for now, I do not want to use the new image optimization in next.js.
请注意,目前,我不想使用 next.js 中的新图像优化。 Local images are working but external images are not working.
本地图像工作,但外部图像不工作。 Below is my code and my next.config.js
下面是我的代码和我的 next.config.js
<Slider
{...settingsThumbs}
asNavFor={nav1}
ref={slider => setSlider2(slider)}
>
{slidesData.map(slide => (
<div className='slick-slide' key={slide.id}>
<img
className='slick-slide-image'
src={`https://picsum.photos/800/400?img=${slide.id}`}
alt='sfd'
/>
</div>
))}
</Slider>
below is my next.js config下面是我的 next.js 配置
module.exports = {
images: {
domains: ['https://picsum.photos/']
}
};
Per the docs , the domain does not appear to need a protocol (https or http) in front of it.根据docs ,域前面似乎不需要协议(https 或 http)。 Try
尝试
module.exports = {
images: {
domains: ['picsum.photos']
}
};
I also suspect you have an error like the following in your console, going off this source code :我还怀疑您的控制台中出现如下错误,关闭此源代码:
domains value must follow format
{ domain: 'picsum.photos', ... }
.域值必须遵循格式
{ domain: 'picsum.photos', ... }
。 See more info here: https://err.sh/next.js/invalid-i18n-config`在此处查看更多信息: https://err.sh/next.js/invalid-i18n-config`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.