<p dir="auto">✅ ➡️ Edit 2020 for Webpack users:</p>
<ul dir="auto">
<li>always prefer <code class="notranslate">import</code> nowadays. Only use <code class="notranslate">require</code> if the package is not an ES Module.</li>
</ul>
<hr>



<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug</p>


<p dir="auto"><strong>What is the current behavior?</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ofi = require('object-fit-images');"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">ofi</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'object-fit-images'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">In webpack 1.x, this picks up the CommonJS file defined in <code class="notranslate">main</code>.</p>
<p dir="auto">In webpack 2.x, this loads the <code class="notranslate">module</code> file and sets <code class="notranslate">ofi = {default: realOfi}</code>, which means that users have to use the unnatural <code class="notranslate">const ofi = require('object-fit-images').default</code>. <a href="https://github.com/bfred-it/object-fit-images/issues/71#issuecomment-294896136" data-hovercard-type="issue" data-hovercard-url="/fregante/object-fit-images/issues/71/hovercard">Example</a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm i object-fit-images@3.1.3
npm i webpack@2.4.1 --global
echo 'var ofi = require(&quot;object-fit-images&quot;); ofi()' &gt; src.js; webpack src.js errors.js
echo 'var ofi = require(&quot;object-fit-images&quot;).default; ofi()' &gt; src.js; webpack src.js works.js
echo 'import ofi from &quot;object-fit-images&quot;; ofi()' &gt; src.js; webpack src.js works-esm.js"><pre class="notranslate">npm i object-fit-images@3.1.3
npm i webpack@2.4.1 --global
<span class="pl-c1">echo</span> <span class="pl-s"><span class="pl-pds">'</span>var ofi = require("object-fit-images"); ofi()<span class="pl-pds">'</span></span> <span class="pl-k">&gt;</span> src.js<span class="pl-k">;</span> webpack src.js errors.js
<span class="pl-c1">echo</span> <span class="pl-s"><span class="pl-pds">'</span>var ofi = require("object-fit-images").default; ofi()<span class="pl-pds">'</span></span> <span class="pl-k">&gt;</span> src.js<span class="pl-k">;</span> webpack src.js works.js
<span class="pl-c1">echo</span> <span class="pl-s"><span class="pl-pds">'</span>import ofi from "object-fit-images"; ofi()<span class="pl-pds">'</span></span> <span class="pl-k">&gt;</span> src.js<span class="pl-k">;</span> webpack src.js works-esm.js</pre></div>



<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><code class="notranslate">import</code> is for ES Modules and it should try to read the <code class="notranslate">module</code> file if it exists. This works correctly.</p>
<p dir="auto"><code class="notranslate">require</code> is for CJS files and it should only read the <code class="notranslate">main</code> entry point, not the <code class="notranslate">module</code> one. If it does, it should at least flatten <code class="notranslate">default</code> wherever possible.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>
<p dir="auto">node 7.8.0<br>
webpack 2.4.1<br>
OSX 10.11.6</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
Wrong parsing images by webpack</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Current binding a src attribute from 'string'</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong></p>
<p dir="auto">Hello!</p>
<p dir="auto">I'im using webpack + vue-loader for insert my images from unsplash api.</p>
<p dir="auto">Here a code <a href="https://gist.github.com/TeodorDre/742a244039e2ea6f3f7ceede4d2e4d30">https://gist.github.com/TeodorDre/742a244039e2ea6f3f7ceede4d2e4d30</a></p>
<p dir="auto">On 11 line i try dinamically binding my images. But instead of string src attribute, i got this -&gt; <a href="http://tinypic.com/r/t7kfbm/9" rel="nofollow">http://tinypic.com/r/t7kfbm/9</a> first link<br>
<a href="https://imgur.com/6mckmWM" rel="nofollow">https://imgur.com/6mckmWM</a> second link</p>
<p dir="auto">I'have no idea what is a trouble. It can be file-loader or url-loader, but i cant understand why webpack trying to do something with image. It is remote an api link.</p>
<p dir="auto">Webpack 3.10.0. Here is my config <a href="https://gist.github.com/TeodorDre/5865d1b5bcc45dc02e7245ded2237b16">https://gist.github.com/TeodorDre/5865d1b5bcc45dc02e7245ded2237b16</a></p>
<p dir="auto">example string that comes from api <code class="notranslate">https://images.unsplash.com/photo-1522205940279-d75807ebcd91?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE5NzE1fQ&amp;s=7cd6765ea295c5b917e921e8ea4aa007</code></p>