base64代码未显示图像javascript/react

获取对象列表。我在列表中循环以检索每个对象中的图像并将其存储在localStorage中

// storing images in localStorage
  storeMovieImagesLocalStorage = (movieList) => {
    movieList.map(movie => {
        localStorage.setItem(movie.id, this.getBase64Image(movie.images[0].url))
    })
  };


// converting url to base64
  getBase64Image = (img) => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    // create new Image to assign image url
    const image = new Image();
    image.src = img;
    image.onload = function() {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
    };

    const dataURL = canvas.toDataURL("image/png");

    return dataURL;
  };

然后我将base64代码应用于我的图像

      this.setState({
        movieUrl: localStorage.getItem(movie.id)
      })

        <MovieImg src={this.state.movieUrl} className="cursor-pointer" onClick={this.handleOpenVideo} />

下面是我找到的devTools/Elements：

<img class="Img-sc-10y4zbe-0 cursor-pointer sc-ifAKCX cmjWax" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC">

对我来说一切都很好，我的控制台没有任何错误。但是，我的图像不显示。当我将鼠标悬停在

img[src]

上方时，它会显示一个不可见的图像，或者没有内容的and图像

---

我做错了什么？

我试图再次将base64字符串转换回图像，即“iVBOR”和“SuQmCC”之间的部分。但这似乎不是从中返回的有效图像

我尝试使用另一个base64字符串，该字符串使用带有属性的html标记表示图像，效果很好：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" class="Img-sc-10y4zbe-0 cursor-pointer sc-ifAKCX cmjWax">

---

问题似乎在于图像的base64字符串不正确，这就是为什么没有显示任何内容。值得注意的是，我不知道您的特定类是做什么的，因此我无法说明它们的行为。

我尝试再次将base64字符串转换回图像，即“iVBOR”和“SuQmCC”之间的部分。但这似乎不是从中返回的有效图像

我尝试使用另一个base64字符串，该字符串使用带有属性的html标记表示图像，效果很好：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" class="Img-sc-10y4zbe-0 cursor-pointer sc-ifAKCX cmjWax">

---

问题似乎在于图像的base64字符串不正确，这就是为什么没有显示任何内容。值得注意的是，我不知道您的特定类做了什么，因此我无法说明它们的行为。

在您调用

toDataURL

时，图像尚未加载，因此画布仍然是空白的。因此我意识到我正在下载

jpeg

图像，并将

png

添加到我的

img[src]

中。所以我把它修好了，现在它显示了一些东西，但我有黑匣子，而不是什么都没有。@Herohtar，我正在做一些事情，我想你是对的。查看使用onLoad函数。在您调用

toDataURL

时，图像尚未加载，因此画布仍为空白。因此我意识到我正在下载

jpeg

图像，并将

png

添加到我的

img[src]

中。所以我把它修好了，现在它显示了一些东西，但我有黑匣子，而不是什么都没有。@Herohtar，我正在做一些事情，我想你是对的。看看如何使用onLoad函数。这些类很好，它们没有任何影响它的东西。我认为@Herohtar让我走上了正确的道路。所有30张图片都有相同的base64，这很奇怪，这让我觉得图片还没有过时。课程很好，他们没有任何影响。我认为@Herohtar让我走上了正确的道路。所有30张图片都有相同的base64，这很奇怪，这让我觉得这张图片还没有过时。