Commit 1abff1d2 authored by Fran Garcia-Linares's avatar Fran Garcia-Linares Committed by Tim Plunkett
Browse files

Issue #3281327 by fjgarlin, bnjmnm: Fallback image if the image is not found

parent 5a41408c

modules/project_browser_devel/src/Plugin/ProjectBrowserSource/RandomDataPlugin.php

+1 −1
Original line number Diff line number Diff line
@@ -183,7 +183,7 @@ class RandomDataPlugin extends PluginBase implements ProjectBrowserSourceInterfa 
        'field_project_images' => [

          [

            'file' => [

              'uri' => 'https://picsum.photos/600/400',

              'uri' => rand(0, 3) ? 'https://picsum.photos/600/400' : 'https://image.not/found.jpg',

              'resource' => 'image',

            ],

            'alt' => $machine_name . ' logo',

sveltejs/public/build/bundle.js

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js.map

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/src/Project/Image.svelte

+16 −12
Original line number Diff line number Diff line
@@ -13,33 +13,37 @@ 
  export let fieldProjectImages;



  const { drupalSettings, Drupal } = window;

  const fallbackImage = `${drupalSettings.project_browser.origin_url}/${drupalSettings.project_browser.module_path}/images/puzzle-piece-placeholder.svg`;

  const showFallback = (ev) => {

    ev.target.src = fallbackImage;

  };

</script>



{#if typeof fieldProjectImages !== 'undefined' && fieldProjectImages.length}

  {#if fieldProjectImages[0].file.resource === 'image'}

    <img src={fieldProjectImages[0].file.uri} alt={fieldProjectImages[0].alt} />

    <img

      src={fieldProjectImages[0].file.uri}

      alt={fieldProjectImages[0].alt}

      on:error={showFallback}

    />

  {:else if (fieldProjectImages[0].file.resource = 'file')}

    <!-- Keeping this block for compatibility with the mockapi. -->

    {#await fetchEntity(fieldProjectImages[0].file.uri)}

      <span>...waiting</span>

    {:then file}

      <img src={file.url} alt={fieldProjectImages[0].alt} />

      <img

        src={file.url}

        alt={fieldProjectImages[0].alt}

        on:error={showFallback}

      />

    {:catch error}

      <span style="color: red">{error.message}</span>

    {/await}

  {:else}

    <img

      src="{drupalSettings.project_browser.origin_url}/{drupalSettings

        .project_browser.module_path}/images/puzzle-piece-placeholder.svg"

      alt={Drupal.t('Placeholder')}

    />

    <img src={fallbackImage} alt={Drupal.t('Placeholder')} />

  {/if}

{:else}

  <img

    src="{drupalSettings.project_browser.origin_url}/{drupalSettings

      .project_browser.module_path}/images/puzzle-piece-placeholder.svg"

    alt={Drupal.t('Placeholder')}

  />

  <img src={fallbackImage} alt={Drupal.t('Placeholder')} />

{/if}



<style>

tests/src/FunctionalJavascript/ProjectBrowserPluginTest.php

+15 −0
Original line number Diff line number Diff line
@@ -111,4 +111,19 @@ class ProjectBrowserPluginTest extends WebDriverTestBase { 
    $assert_session->pageTextContains('Results');

  }



  /**

   * Tests broken images.

   */

  public function testBrokenImages(): void {

    $assert_session = $this->assertSession();



    $this->drupalGet('admin/modules/browse');

    $assert_session->waitForElementVisible('css', '#project-browser .project');

    $assert_session->pageTextContains('Results');

    // RandomData always give an image URL. Sometimes it is a fake URL on

    // purpose so it 404s. This check means that the original image was not

    // found and it was replaced by the placeholder.

    $assert_session->responseContains('puzzle-piece-placeholder.svg');

  }



}