diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index e7c0964d160..6a705cc79aa 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -165,6 +165,14 @@ export default class MImageBody extends React.Component { }; private onImageError = (): void => { + // If the thumbnail failed to load then try again using the contentUrl + if (this.state.thumbUrl) { + this.setState({ + thumbUrl: null, + }); + return; + } + this.clearBlurhashTimeout(); this.setState({ imgError: true, diff --git a/test/components/views/messages/MImageBody-test.tsx b/test/components/views/messages/MImageBody-test.tsx index ca400f13ee1..71b3a79dccd 100644 --- a/test/components/views/messages/MImageBody-test.tsx +++ b/test/components/views/messages/MImageBody-test.tsx @@ -16,7 +16,7 @@ limitations under the License. import React from "react"; import { fireEvent, render, screen } from "@testing-library/react"; -import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; +import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import fetchMock from "fetch-mock-jest"; import encrypt from "matrix-encrypt-attachment"; import { mocked } from "jest-mock"; @@ -171,4 +171,39 @@ describe("", () => { expect(screen.getByRole("progressbar")).toBeInTheDocument(); }); }); + + it("should fall back to /download/ if /thumbnail/ fails", async () => { + const thumbUrl = "https://server/_matrix/media/r0/thumbnail/server/image?width=800&height=600&method=scale"; + const downloadUrl = "https://server/_matrix/media/r0/download/server/image"; + // eslint-disable-next-line no-restricted-properties + cli.mxcUrlToHttp.mockImplementation( + (mxcUrl: string, width?: number, height?: number, resizeMethod?: string, allowDirectLinks?: boolean) => { + return getHttpUriForMxc("https://server", mxcUrl, width, height, resizeMethod, allowDirectLinks); + }, + ); + + const event = new MatrixEvent({ + room_id: "!room:server", + sender: userId, + type: EventType.RoomMessage, + content: { + body: "alt for a test image", + info: { + w: 40, + h: 50, + }, + url: "mxc://server/image", + }, + }); + + const { container } = render( + , + ); + + const img = container.querySelector(".mx_MImageBody_thumbnail")!; + expect(img).toHaveProperty("src", thumbUrl); + + fireEvent.error(img); + expect(img).toHaveProperty("src", downloadUrl); + }); });