javascript - 如何在下一个 js Image 中使用动态链接?
问题描述
我想在下一个 js 中使用动态链接Image
。下一个 Js 建议
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
但我想使用喜欢
const imageDynamic = [Image][1]
<Image
src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png" or {imageDynamic}
alt="Picture of the author"
width={500}
height={500}
/>
图像将来自 api,因此图像 src 每次都会改变。我不能在下一个 js 图像中使用链接,可以在下一个 js 图像中使用链接吗?
解决方案
Next Image 的工作类似于 htmlimg
标签。对于动态用例,您应该将动态数据获取到页面。
要获取动态数据,您应该使用getServerSideProps
orgetStaticProps
通过 url 传递动态属性:
https ://nextjs.org/docs/basic-features/data-fetching
import Image from "next/image";
const WithDynamicImage = (image) => {
return (
<Image src={imageDynamic}
alt="Picture of the author"
width={500}
height={500}
/>
)
}
export async function getServerSideProps({
params,
}) {
const image = await getImages() // fetch your data;
const imageDynamic = image[param.id] //pass the prop from the url
return { props: { image : imageDynamic || null } };
}
export default WithDynamicImage;
数据提取仅适用于pages/
文件夹,不适用于组件。如果您要使用到组件中,您应该在页面中获取数据并将道具传递给组件。
推荐阅读
- primefaces - 如何使用按钮或命令按钮折叠 primesfaces 数据表?
- java - Java嵌套parcelable,无法初始化数组
- reactjs - Apollo Query 未发出请求
- php - PHP - 以分钟为单位的时间差
- angular - 如何检查用户是否是管理员?
- javascript - 与 VueJS 的反应式绑定
- php - 更改 Twig 缓存文件权限以清除缓存
- c# - 在生产中更新 dll 时请求会发生什么情况?
- go - 为什么 make([]int, 14) 中有 runtime.morestack 而 make([]int, 13) 中没有?
- react-native - 从 React Native 中的图标顶部和底部删除空格