{"action":"created","issue":{"url":"https://api.github.com/repos/rails/webpacker/issues/918","repository_url":"https://api.github.com/repos/rails/webpacker","labels_url":"https://api.github.com/repos/rails/webpacker/issues/918/labels{/name}","comments_url":"https://api.github.com/repos/rails/webpacker/issues/918/comments","events_url":"https://api.github.com/repos/rails/webpacker/issues/918/events","html_url":"https://github.com/rails/webpacker/issues/918","id":263825761,"number":918,"title":"Images not working ?","user":{"login":"JerryGreen","id":13215662,"avatar_url":"https://avatars3.githubusercontent.com/u/13215662?v=4","gravatar_id":"","url":"https://api.github.com/users/JerryGreen","html_url":"https://github.com/JerryGreen","followers_url":"https://api.github.com/users/JerryGreen/followers","following_url":"https://api.github.com/users/JerryGreen/following{/other_user}","gists_url":"https://api.github.com/users/JerryGreen/gists{/gist_id}","starred_url":"https://api.github.com/users/JerryGreen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JerryGreen/subscriptions","organizations_url":"https://api.github.com/users/JerryGreen/orgs","repos_url":"https://api.github.com/users/JerryGreen/repos","events_url":"https://api.github.com/users/JerryGreen/events{/privacy}","received_events_url":"https://api.github.com/users/JerryGreen/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":13,"created_at":"2017-10-09T09:02:56Z","updated_at":"2017-11-16T21:52:21Z","closed_at":null,"author_association":"NONE","body":"**Main problem:**\r\n\r\nMy images (used in css or imported from js too) are not showing.\r\n\r\n**My little research:**\r\n\r\nHere's my manifest.json\r\n\r\n<pre>\r\n{\r\n  \"_/_/frontend/src/components/shared/act-card-template/loading.svg\": \"/packs/_/_/frontend/src/components/shared/act-card-template/loading-6e55ac3085d4cd8651da32d87be226d1.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card-template/successBlack.svg\": \"/packs/_/_/frontend/src/components/shared/act-card-template/successBlack-de0a3c628cd7278df54be55bddac8fe2.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card-template/successGreen.svg\": \"/packs/_/_/frontend/src/components/shared/act-card-template/successGreen-3c4c4898f2f924212a0a11f69cd7600e.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card-template/successWhite.svg\": \"/packs/_/_/frontend/src/components/shared/act-card-template/successWhite-974fc1c1cbe6751ee469923a7ad5514d.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card/act-content/save-button/starBlack.svg\": \"/packs/_/_/frontend/src/components/shared/act-card/act-content/save-button/starBlack-b7b4f99072162243573dc36373a40cde.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card/act-content/save-button/starDark.svg\": \"/packs/_/_/frontend/src/components/shared/act-card/act-content/save-button/starDark-4173cc2a32cbae7f7c1a607564cc2a4c.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card/act-content/save-button/starGray.svg\": \"/packs/_/_/frontend/src/components/shared/act-card/act-content/save-button/starGray-7ef082685573660caa281c9a88782263.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card/act-content/update-profile/info.svg\": \"/packs/_/_/frontend/src/components/shared/act-card/act-content/update-profile/info-ca4b7a13cf8b16e9db2d1327cd62b574.svg\",\r\n  \"_/_/frontend/src/components/shared/act-card/act-content/update-profile/user.svg\": \"/packs/_/_/frontend/src/components/shared/act-card/act-content/update-profile/user-8fc21994702eeed04eeb0e58f7cf4ff7.svg\",\r\n  \"_/_/frontend/src/components/shared/avatar/placeholder.png\": \"/packs/_/_/frontend/src/components/shared/avatar/placeholder-02fc77ef408126c01fe778724da95b8d.png\",\r\n  <b>\"_/_/frontend/src/components/shared/button/spinner.svg\": \"/packs/_/_/frontend/src/components/shared/button/spinner-ef0d6a72d27c7ff2dd8a7e44633c4fea.svg\",</b>\r\n  \"_/_/frontend/src/components/shared/file-uploader/ic-panorama.png\": \"/packs/_/_/frontend/src/components/shared/file-uploader/ic-panorama-6192af34be4187bad03edcfbfa5b9e32.png\",\r\n  \"_/_/frontend/src/components/shared/form/checkbox/check-symbol.png\": \"/packs/_/_/frontend/src/components/shared/form/checkbox/check-symbol-388a21d1895c3d5781347728e0cd878e.png\",\r\n  \"_/_/frontend/src/components/shared/form/checkbox/facebook.svg\": \"/packs/_/_/frontend/src/components/shared/form/checkbox/facebook-a7d2e219cf52ddf3f10ae25e051e0012.svg\",\r\n  \"_/_/frontend/src/components/shared/publish-act-form/facebook.svg\": \"/packs/_/_/frontend/src/components/shared/publish-act-form/facebook-118108b9b9d25f8a2f57c4ebf067dc03.svg\",\r\n  \"application.js\": \"/packs/application-fc48aa5fe166535c7daa.js\",\r\n  \"check-symbol.png\": \"/packs/66c38fac9f04cbd261a1809f4d323de9.png\",\r\n  \"facebook.svg\": \"/packs/443ce8483351d98a6b3faaff0c734e90.svg\",\r\n  \"ic-panorama.png\": \"/packs/9149b6f99e1b25867e8afd956f2f9528.png\",\r\n  \"info.svg\": \"/packs/fe9435a22986ed7f6948dbfd15453f34.svg\",\r\n  \"loading.svg\": \"/packs/19fd21c1f5f70cc53f44645d5d86bed9.svg\",\r\n  \"placeholder.png\": \"/packs/eb2b82c57dda81c9aa7546a27b8399c1.png\",\r\n  \"server-bundle.js\": \"/packs/server-bundle-fab377996a7864efcd1d.js\",\r\n  <b>\"spinner.svg\": \"/packs/704a7db74ce1094a28330dc4cfb46943.svg\",</b>\r\n  \"starBlack.svg\": \"/packs/2a0871cec73ef296adf025627775ef50.svg\",\r\n  \"starDark.svg\": \"/packs/d3a436284e6bc71a7aaf468144c8c6a1.svg\",\r\n  \"starGray.svg\": \"/packs/a7a12eb5fd39c5d8d977c4d7949c64e2.svg\",\r\n  \"successBlack.svg\": \"/packs/5e180ce99100566a005b7ed79f67bce7.svg\",\r\n  \"successGreen.svg\": \"/packs/e47d5dddf44ac470c1cdbe94e9bcb74b.svg\",\r\n  \"successWhite.svg\": \"/packs/dac311d92504af9685e719d7d2901bd2.svg\",\r\n  \"user.svg\": \"/packs/d0ba76249cc2d2190fc7af41258dffbc.svg\"\r\n}\r\n</pre>\r\n\r\n(Bold text is an example I will talk about but everything below applies to other images too)\r\n\r\nI use my `spinner.svg` in my css (`.styl` actually):\r\n\r\n```css\r\nbackground: url('components/shared/act-card-template/spinner.svg') center no-repeat\r\n```\r\n\r\nIn browser it looks like:\r\n```css\r\nbackground: url(/packs/_/_/frontend/src/components/shared/button/spinner-ef0d6a72d27c7ff2dd8a7e44633c4fea.svg) center no-repeat;\r\n```\r\n\r\nEverything is ok right now. We have a strange `/_/_/` in url, whatever... BUT LOOK!\r\nIf you open this image, you can see there (instead of typical XML/SVG markup) some shit:\r\n\r\n(this is `ef0d6a72d27c7ff2dd8a7e44633c4fea.svg` file)\r\n```\r\nmodule.exports = __webpack_public_path__ + \"704a7db74ce1094a28330dc4cfb46943.svg\";\r\n```\r\n\r\nOf course, this is not an actual image so my image is not showing:\r\n![image](https://user-images.githubusercontent.com/13215662/31330864-8d51a816-acf9-11e7-8c2f-aa2e69a23f77.png)\r\n\r\nMeanwhile, look at basic url (without `/_/_/` shit; hello, spinner!):\r\n![image](https://user-images.githubusercontent.com/13215662/31330983-f163c604-acf9-11e7-8cd8-0b5505c23e41.png)\r\n\r\nSorry for a bit of offensive language. But what's wrong with these urls/images?"},"comment":{"url":"https://api.github.com/repos/rails/webpacker/issues/comments/345074512","html_url":"https://github.com/rails/webpacker/issues/918#issuecomment-345074512","issue_url":"https://api.github.com/repos/rails/webpacker/issues/918","id":345074512,"user":{"login":"gauravtiwari","id":771039,"avatar_url":"https://avatars2.githubusercontent.com/u/771039?v=4","gravatar_id":"","url":"https://api.github.com/users/gauravtiwari","html_url":"https://github.com/gauravtiwari","followers_url":"https://api.github.com/users/gauravtiwari/followers","following_url":"https://api.github.com/users/gauravtiwari/following{/other_user}","gists_url":"https://api.github.com/users/gauravtiwari/gists{/gist_id}","starred_url":"https://api.github.com/users/gauravtiwari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gauravtiwari/subscriptions","organizations_url":"https://api.github.com/users/gauravtiwari/orgs","repos_url":"https://api.github.com/users/gauravtiwari/repos","events_url":"https://api.github.com/users/gauravtiwari/events{/privacy}","received_events_url":"https://api.github.com/users/gauravtiwari/received_events","type":"User","site_admin":false},"created_at":"2017-11-16T21:52:21Z","updated_at":"2017-11-16T21:52:21Z","author_association":"COLLABORATOR","body":"@richardvenneman Apologies for late reply, Could you please try this: \r\n\r\n```js\r\nconst { environment } = require(\"@rails/webpacker\");\r\nconst babelLoader = require(\"@rails/webpacker/package/loaders/babel\");\r\n\r\nbabelLoader.use = [\r\n  {\r\n    loader: babelLoader.loader,\r\n    options: babelLoader.options\r\n  }\r\n]\r\n\r\ndelete babelLoader.options\r\ndelete babelLoader.loader\r\n\r\nenvironment.loaders.delete('file')\r\nenvironment.loaders.set(\"svg\", {\r\n  test: /\\.svg$/,\r\n  use: babelLoader.use.concat([\r\n    {\r\n      loader: \"react-svg-loader\",\r\n      options: {\r\n        jsx: true // true outputs JSX tags\r\n      }\r\n    }\r\n  ])\r\n});\r\n\r\nmodule.exports = environment;\r\n```"}}
{"actor":{"display_login":"gauravtiwari"}}