How load dynamic images with params ?
See original GitHub issueI 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 Results From Across the Web
Dynamically load image with different GET parameters
Save this question. Show activity on this post. I'm trying to load an image (created with PHP) with jQuery and passing a few...
Read more >Dynamic image loading with Parameter - Tableau Community
You need to do 2 things: 1. Provide a value in the parameter for "All Churches". Do NOT put a space, since a...
Read more >Can I dynamically load images based on URL parameters?
Is there a way to dynamically load an image based on URL parameters, the same way you can prepopulate fields using parameters?
Read more >Best practices for optimizing the quality of your images
Adobe Dynamic Media Classic includes more than 100 image-serving commands for tuning and optimizing images and rendering results.
Read more >Using images - Canvas API - MDN Web Docs
These can be used to do dynamic photo compositing or as backdrops of graphs, ... When this script gets executed, the image starts...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The following example is also not working for me:
Where I followed the following guide: https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm
Still doesn’t solve the issue when sizes need to be dynamic too. There has to be a workaround…