Comments (6)
I found the issue (and it cost me many hours so I hope this may help anyone in the same situation). My images were not displayed due to the preceding slash that I put in the responsive-loader configuration (see previous code example). Also I changed the way I implement the loader in the vue-cli setup. This setup has fixed my problem:
// vue.config.js
module.exports = {
chainWebpack: config => {
const imgRule = config.module.rule('images');
imgRule.uses.clear();
imgRule
.use('responsive-loader')
.loader('responsive-loader')
.options({
adapter: require('responsive-loader/sharp'),
sizes: [600, 1200],
placeholder: true,
placeholderSize: 50,
name: 'assets/img/[hash]-[width].[ext]'
});
}
}
So name: 'assets/img/[hash]-[width].[ext]' instead of name: '/assets/img/[hash]-[width].[ext]'.
This is not a vue-cli specific fix so I think it is useful to post back my solution.
from responsive-loader.
@bparticle – do
<script>
const responsiveImage = require( './assets/img/image_0.jpg');
</script>
And then use in your HTML
<img src={responsiveImage.src} srcset={responsiveImage.srcSet} alt="">
And your srcSet will be set up.
from responsive-loader.
@Melzmr Thanks for your reply! Your answer makes perfect sense, and it is one of the options out of many I tried, but somehow nothing works. I'm still scratching my head over this but can't let it go. I'm using Vue.js at the moment and this is the code I'm currently testing:
<template>
<div id="app">
<h1>{{ greeting }}</h1>
<p>{{srcTest}}</p>
<p>{{src}}</p>
<p>{{srcSet}}</p>
<img :src="src">
<br>
</div>
</template>
<script>
const responsiveImage = require("./assets/img/image_0.jpg");
export default {
name: "app",
data: function() {
return {
greeting: "Hello",
srcTest: responsiveImage,
src: responsiveImage.src,
srcSet: responsiveImage.srcSet
};
}
};
</script>
The only positive response I get is the raw responsiveImage reference in the first <p> tag. It's outputting the base64 code that is supposed to contain the image (data:image/jpeg;base64,bW9kdWxlLmV4cG9ydH......). If I put this in the image tag however I get a broken image link. The other tests aren't outputting anything at all (responsiveImage.src and .srcSet).
from responsive-loader.
@bparticle looks like you have another loader hijacking your image (probably url-loader
?) …
from responsive-loader.
@herrstucki That will be the case probably. I think the way vue-cli is implementing its webpack configuration is awkward to say the least. I tried to set it up like this:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('responsive-loader')
.loader('responsive-loader')
.options({
adapter: require('responsive-loader/sharp'),
sizes: [600, 1200],
placeholder: true,
placeholderSize: 50,
name: '/assets/img/[hash]-[width].[ext]'
});
},
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
But the trouble with that setup is not immediately relevant to this repository I suppose!
from responsive-loader.
For other templates using html-loader
this can be accomplished by using multiple source
elements. Here's a pug example:
picture
source(media='(min-width: 1024px)', srcset=`${src}?size=1280`)
source(media='(min-width: 768px)', srcset=`${src}?size=1024`)
source(media='(min-width: 640px)', srcset=`${src}?size=768`)
source(media='(min-width: 481px)', srcset=`${src}?size=640`)
img(src=`${src}?size=481`, loading='lazy', alt=alt)
Multiple source
elements are required in this case since html-loader won't transform a single srcset with multiple target resolutions.
from responsive-loader.
Related Issues (20)
- Ominous "cannot destructure property height" issue (with reproducable demo) HOT 1
- Error: Prevent writing to file that only differs in casing or query string from already written file. HOT 5
- webpack storybook nextjs HOT 2
- Memory/CPU runaway HOT 1
- Error: Cannot find module './image.jpg?resize&size=534' HOT 3
- Examples to not account for Webpacks default `images` rule
- outputPath is not respecting absolute paths
- Images double-bundled and wrong name in css file HOT 1
- responsive-loader does not work on react-scripts 5.0.0 HOT 1
- templates and webpack 5 HOT 1
- [BUG] Option `placeholder` with query `size` causes an error. Version 3.0.2 only. HOT 2
- [BUG] Using `html-loader` and responsive image with JSON notation occurs ERROR HOT 4
- [DOCS] How to use responsive-loader with Pug HOT 2
- Windows - generation of hash image files in dist folder HOT 1
- Problems with Webpack 5 and html-webpack-plugin HOT 1
- [FEATURE REQUEST] How to configure for auto publicPath?
- Resize and serve remote images? HOT 1
- Custom contenthash length in options.name HOT 1
- After upgrading to 3.1.0 absolute url scheme is corrupted (https:// rewritten to https:/) HOT 2
- [FEATURE REQUEST] filename option as function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from responsive-loader.