[英]The provided 'src' attribute is an unsupported type ImageUrlBuilder
I am using Sanity image url in my project and I am getting this error in my console page that says我在我的项目中使用 Sanity 图像 url,我在我的控制台页面中收到此错误
This error pops up when ever I use the testimonial component in the react app> I am trying to make a portfolio but do not know how to fix this.每当我在 React 应用程序中使用推荐组件时都会弹出此错误 > 我正在尝试制作作品集,但不知道如何解决这个问题。 I have ImageUrlBuilder worked fine in other components but it's giving an error with this one.我的 ImageUrlBuilder 在其他组件中运行良好,但它在这个组件中出错。
const Testimonial = () => {
const [currentIndex, setCurrentIndex] = useState(0);
const [testimonials, setTestimonials] = useState([]);
const [brands, setBrands] = useState([]);
const handleClick = (index) => {
setCurrentIndex(index);
};
useEffect(() => {
const query = '*[_type == "testimonials"]';
const brandsQuery = '*[_type == "brands"]';
client.fetch(query).then((data) => {
setTestimonials(data);
});
client.fetch(brandsQuery).then((data) => {
setBrands(data);
});
}, []);
return (
<>
{testimonials.length && (
<>
<div className="app__testimonial-item app__flex">
<img src={urlFor(testimonials[currentIndex].imgurl)} alt={testimonials[currentIndex].name} />
<div className="app__testimonial-content">
<p className="p-text">{testimonials[currentIndex].feedback}</p>
<div>
<h4 className="bold-text">{testimonials[currentIndex].name}</h4>
<h5 className="p-text">{testimonials[currentIndex].company}</h5>
</div>
</div>
</div>
<div className="app__testimonial-btns app__flex">
<div className="app__flex" onClick={() => handleClick(currentIndex === 0 ? testimonials.length - 1 : currentIndex - 1)}>
<HiChevronLeft />
</div>
<div className="app__flex" onClick={() => handleClick(currentIndex === testimonials.length - 1 ? 0 : currentIndex + 1)}>
<HiChevronRight />
</div>
</div>
</>
)}
<div className="app__testimonial-brands app__flex">
{brands.map((brand) => (
<motion.div
whileInView={{ opacity: [0, 1] }}
transition={{ duration: 0.5, type: 'tween' }}
key={brand._id}
>
<img src={urlFor(brand.imgUrl)} alt={brand.name} />
</motion.div>
))}
</div>
</>
);
};
export default AppWrap(
MotionWrap(Testimonial, 'app__testimonial'),
'testimonial',
'app__primarybg',
);
I ran into the same problem;).我遇到了同样的问题;)。 The course is from 2020 so some things changed over the time.该课程是从 2020 年开始的,所以随着时间的推移,有些事情发生了变化。
you are missing.url()你缺少.url()
Hi There i has the same probléme i just changed this Line:你好我有同样的问题我只是改变了这条线:
<img
src={urlFor(testimonials[currentIndex].imgUrl).width(200)}
alt="testimonial"
/>
to This line:到这一行:
<img
src={urlFor(testimonials[currentIndex].imgurl).width(200)}
alt="testimonial"
/>
The response for this image is different instead of typing此图像的响应与键入不同
src={urlFor(testimonials[currentIndex].imgurl)}
type this:输入:
src={urlFor(testimonials[currentIndex].imageurl)}
Everything else is correct其他一切都是正确的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.