试图解决错误“ urlforimage.ts：43未接收错误：无法从源（Undefined）解析图像URL”。使用理智并反应

Question

我正在使用与JavaScript的理智并进行反应遇到错误。该应用程序是一个个人投资组合网站，我已经成功地将数据从SANITY中获取了其他3个部分。现在，我正在研究推荐部分，我正在尝试拉2张当前在Sanity Studio中加载的图像（JPEG）：Teastimonials＆GT; Imgurl 在我的返回声明中，我正在检查推荐时间的长度，以便我只有至少一个出现时才能获取。在图像标签中，我正在使用src = {urlfor（testimonials [currentIndex] .imgurl）}

代码块

return (
<>
  {testimonials.length && (
    <>
      <div className="app__testimonial-item app__flex">
        <img src={urlFor(testimonials[currentIndex].imgurl)} alt="testimonial" />            
      </div>
    </>
  )}
</>

：）;

 1. urlFor is the function used to fetch images off Sanity, as per their documentation.
 2. currentIndex is the useState inside of the Testimonial function, which acts as the container component for this section of the website. It will keep track of the state of the image being displayed and will cycle through others with a clickable action (code not present here)


**Question:** I am getting an error that is caused by the img tag and cannot find anything online about a fix. This [thread][1] does not fix my issue. 


**ERROR MESSAGE**:
react-dom.development.js:20085 The above error occurred in the <img> component:
    at img
    at div
    at Testimonial (http://localhost:3000/main.20b2c7aaa42080546b80.hot-update.js:37:90)
    at div
    at VisualElementHandler (http://localhost:3000/static/js/bundle.js:119980:38)
    at MotionComponent (http://localhost:3000/static/js/bundle.js:119880:20)
    at HOC
    at div
    at div
    at HOC
    at div
    at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.


Error Message

Uncaught Error: Unable to resolve image URL from source (undefined)
    at urlForImage (urlForImage.ts:43:1)
    at ImageUrlBuilder.url (builder.ts:229:1)
    at ImageUrlBuilder.toString (builder.ts:234:1)
    at setValueForProperty (react-dom.development.js:672:1)
    at setInitialDOMProperties (react-dom.development.js:8931:1)
    at setInitialProperties (react-dom.development.js:9135:1)
    at finalizeInitialChildren (react-dom.development.js:10201:1)
    at completeWork (react-dom.development.js:19470:1)
    at completeUnitOfWork (react-dom.development.js:22815:1)
    at performUnitOfWork (react-dom.development.js:22787:1)


  [1]: https://stackoverflow.com/questions/69031649/error-unable-to-resolve-image-url-from-source-null

Answer 1

转到架构中的证明文件，然后更改本节：

    {
        name:'imgurl',
        title:'ImgUrl',
        type: 'image',
        options: {
          hotspot: true,
    },

Answer 2

只需使用此问题 - 将为您工作，

{Data.image && (<img src={urlFor(Data.image.url()} alt="testimonial" />)}

而不是使用iMgurl或使用URL（）。
我也不明白您为什么使用[CurrentIndex]。但是，无论如何..