Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How load dynamic images with params ?

See original GitHub issue

I have component with dynamic params. Now, I have error: [Vue warn]: Error in render: “Error: Cannot find module ‘./images/main/mens/img-desktop.jpg?lqip’”

      <picture>
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source
          :data-srcset="getSrc(srcDesktop)"
          type="image/jpeg"
          media="(min-width: 751px)"
        >
        <source
          :data-srcset="getSrc(srcMobile)"
          type="image/jpeg"
          media="(min-width: 320px)"
        >
        <!--[if IE 9]></video><![endif]-->
        <img
          class="lf-quote-section__img lazy"
          :src="$mq === 'mobile' || $device.isMobile ? getSrc(srcMobile + '?lqip') : getSrc(srcDesktop + '?lqip')"
          alt="author"
          ref="quoteImg"
        />
      </picture>

    computed: {
      getSrc(){
        return src => require(`@/assets/${ src }`);
      }
    },

Without params, all work. How to fix it ?

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:7 (1 by maintainers)

Top GitHub Comments

1reaction

JustDevelopcommented, Dec 12, 2020

The following example is also not working for me:

<template>
  <figure :class="['picture']" v-bind="$attrs">
    <picture>
      <source
        :data-src="getPath('?resize&size=750&format=webp')"
        type="image/webp"
        :media="`(max-width: 768px)`"
      />
      <source
        :data-srcset="getPath('?resize&size=750')"
        type="image/png"
        :media="`(max-width: 768px)`"
      />

      <source
        :data-srcset="getPath('?resize&size=1700&format=webp')"
        type="image/webp"
      />
      <source :data-srcset="getPath('?resize&size=1700')" type="image/png" />

      <img :data-srcset="getPath()" class="lazyload" :alt="alt" />
    </picture>
  </figure>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      required: true,
    },
  },
  methods: {
    getPath(suffix) {
      suffix = typeof suffix === 'undefined' ? '' : suffix
      return require.context('~/assets/images/' + this.src + suffix)
    },
  },
}
</script>

Where I followed the following guide: https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm

1reaction

schellenbergkcommented, Dec 2, 2020

Still doesn’t solve the issue when sizes need to be dynamic too. There has to be a workaround…