{"action":"created","issue":{"url":"https://api.github.com/repos/herrstucki/responsive-loader/issues/68","repository_url":"https://api.github.com/repos/herrstucki/responsive-loader","labels_url":"https://api.github.com/repos/herrstucki/responsive-loader/issues/68/labels{/name}","comments_url":"https://api.github.com/repos/herrstucki/responsive-loader/issues/68/comments","events_url":"https://api.github.com/repos/herrstucki/responsive-loader/issues/68/events","html_url":"https://github.com/herrstucki/responsive-loader/issues/68","id":353556916,"node_id":"MDU6SXNzdWUzNTM1NTY5MTY=","number":68,"title":"How to reference different sizes in a template","user":{"login":"bparticle","id":4715900,"node_id":"MDQ6VXNlcjQ3MTU5MDA=","avatar_url":"https://avatars0.githubusercontent.com/u/4715900?v=4","gravatar_id":"","url":"https://api.github.com/users/bparticle","html_url":"https://github.com/bparticle","followers_url":"https://api.github.com/users/bparticle/followers","following_url":"https://api.github.com/users/bparticle/following{/other_user}","gists_url":"https://api.github.com/users/bparticle/gists{/gist_id}","starred_url":"https://api.github.com/users/bparticle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bparticle/subscriptions","organizations_url":"https://api.github.com/users/bparticle/orgs","repos_url":"https://api.github.com/users/bparticle/repos","events_url":"https://api.github.com/users/bparticle/events{/privacy}","received_events_url":"https://api.github.com/users/bparticle/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-08-23T21:17:05Z","updated_at":"2018-08-30T13:27:52Z","closed_at":null,"author_association":"NONE","body":"Responsive-loader is generating all my images beautifully with the correct names and sizes, but I can't figure out how to reference other sizes than the default (smallest one) in my template!\r\n```\r\n// webpack.config file\r\n...\r\n{\r\n  test: /\\.(jpe?g|png)$/i,\r\n  loader: 'responsive-loader',\r\n  options: {\r\n    adapter: require('responsive-loader/sharp'),\r\n    sizes: [600, 1200],\r\n    placeholder: true,\r\n    placeholderSize: 50,\r\n    name: '/assets/img/[hash]-[width].[ext]'\r\n  }\r\n},\r\n...\r\n```\r\nAnd this is how I'm referencing the images in my template html\r\n```\r\n  <img src=\"${require('./assets/img/image_0.jpg')}\" alt=\"\">\r\n```\r\nThis gives me the 600px wide image and I would like to get different images based on screen size. Any pointers?"},"comment":{"url":"https://api.github.com/repos/herrstucki/responsive-loader/issues/comments/417319035","html_url":"https://github.com/herrstucki/responsive-loader/issues/68#issuecomment-417319035","issue_url":"https://api.github.com/repos/herrstucki/responsive-loader/issues/68","id":417319035,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNzMxOTAzNQ==","user":{"login":"bparticle","id":4715900,"node_id":"MDQ6VXNlcjQ3MTU5MDA=","avatar_url":"https://avatars0.githubusercontent.com/u/4715900?v=4","gravatar_id":"","url":"https://api.github.com/users/bparticle","html_url":"https://github.com/bparticle","followers_url":"https://api.github.com/users/bparticle/followers","following_url":"https://api.github.com/users/bparticle/following{/other_user}","gists_url":"https://api.github.com/users/bparticle/gists{/gist_id}","starred_url":"https://api.github.com/users/bparticle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bparticle/subscriptions","organizations_url":"https://api.github.com/users/bparticle/orgs","repos_url":"https://api.github.com/users/bparticle/repos","events_url":"https://api.github.com/users/bparticle/events{/privacy}","received_events_url":"https://api.github.com/users/bparticle/received_events","type":"User","site_admin":false},"created_at":"2018-08-30T13:27:52Z","updated_at":"2018-08-30T13:27:52Z","author_association":"NONE","body":"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:\r\n```\r\n// vue.config.js\r\nmodule.exports = {\r\n  chainWebpack: config => {\r\n    const imgRule = config.module.rule('images');\r\n    imgRule.uses.clear();\r\n    imgRule\r\n    .use('responsive-loader')\r\n    .loader('responsive-loader')\r\n    .options({\r\n      adapter: require('responsive-loader/sharp'),\r\n      sizes: [600, 1200],\r\n      placeholder: true,\r\n      placeholderSize: 50,\r\n      name: 'assets/img/[hash]-[width].[ext]'\r\n    });\r\n  }\r\n}\r\n```\r\nSo **name: 'assets/img/[hash]-[width].[ext]'** instead of name: '/assets/img/[hash]-[width].[ext]'.\r\nThis is not a vue-cli specific fix so I think it is useful to post back my solution."}}
{"actor":{"display_login":"bparticle"}}