Open neodon opened 7 years ago
I think I figured out a way to resolve this issue. By default vue-loader will transform img src and image href attributes to require expressions. This can be disabled with the transformToRequire option: https://github.com/vuejs/vue-loader/blob/master/docs/en/options.md#transformtorequire
Here is the change I made to pass the test case: https://github.com/neodon/vue-node/commit/3312b6af5b5e9091720b6fc84a4876a6cae390d1
I understand this is a change the users of your module would have to make in their webpack config. Do you think it could be useful to mention it in the README?
Thanks for hearing me out.
Transforming image tags to use require statements is a feature of html-loader
which is used by vue-loader
. It's actually very common to leave this on because then webpack is able to manage all of your assets which gives you really powerful features. If you are referencing svgs, for instance, you can use svgo-loader
to optimize them. Other loaders will let you optimize other image types. Chaining with the file-loader
will make webpack output files in the destination directory and url-loader
will let you inline resources into your JavaScript bundle. Other benefits include failing your build if an asset is missing.
It is my experience that you should let webpack manage all of your assets so you don't have to. Is there a reason why you don't want webpack to manage your assets? If you build your application without letting webpack manage your assets it's up to you to make sure they are in place correctly.
If you turn off that option you turned on and set up either file-loader
or url-loader
for the pattern/\.png$/
you should be good to go.
Thank you for the quick response and extra information. I agree with you and would much prefer to leave the require statements enabled. I am only doing this for unit tests though, so it's a viable work-around at the moment.
I have already tried setting up file-loader and url-loader for png files. I have also tried ignore-loader and encountered the same problem.
While trying to add some logging and having the log messages treated as bad source code by the compiler, it occurred to me that the issue might be related to the way compiled output is being passed through stdout. You should be able to reproduce the error from my initial message even when using alternative loaders.
Hello,
I just started tinkering with vue-node in order to run unit tests on my components without having to spin up a browser. It's pretty cool.
I'm hoping you can help me with an issue I ran into. I'm probably just doing something wrong.
Whenever I reference an image file in my component, it appears to be trying to inline the image file contents in the compiled render function. I have added the output below.
Here is the minimal test case that demonstrates the issue: https://github.com/neodon/vue-node/commit/8406b5057e75b6ae73539284f2ee2d7d1e99a964
Pardon the cross-env stuff, I just needed it for win32 support.
Can you give me any insights?