Loading local images

[jake-tulip]

Is it possible to load local images, such as those in src/assets/ images?

Using the code here: https://stackoverflow.com/a/50515442 for the source, <lazy-img src="@assets/../image.png"> it doesn't seem to load the image properly.

[subotkevic]

It should be possible. I’ll check that little bit later.

Are you sure your path to the image is correct?

Make sure it works on normal <img> element.

[jake-tulip]

If I change the code to <img src="@assets/../image.svg" /> (just remove the lazy part), the image shows.

The image is an SVG if that matters.

[jake-tulip]

<img src="@assets/image.svg" />

Translates to (hash at the end is autogenerated):

<img src="/static/img/image.d79ab85.svg">

<lazy-img src="@assets/image.svg" />

Translates to:

<div class="lazy-image" style="max-width: 100%;">
   <span>
      <canvas width="1" height="1" class="lazy-image-canvas"></canvas>
      <div class="lazy-image-wrapper" style="padding-bottom: 56.25%;">
         <img class="lazy-image-main" style="display: none;"> <!---->
      </div>
   </span>
</div>

[subotkevic]

I’ll update you on that.

[subotkevic]

By the way, have you tried to do something like this?

:src=“@/assets/...” with : before the attribute?

And another way is maybe to import the image like this:

import image from ‘@/assets/...’;

Then in your data():

testImage: image,

And then: :src=“testImage”

[jake-tulip]

:src="@assets/image.png..."

Gives a syntax error (not allowed : on src attribute)

Using the image import,

import image from ‘@/assets/...’;
data: () => ({
  image: image
}),

And the :src=“testImage”

Works perfectly.

Is it not possible to allow inline local images? If not, this works as a solution.

[subotkevic]

I’ll try to check why inline solution is not working. But for now you can use this workaround.

I’ll update you.

[subotkevic]

Ok, so finally I came up with results.

It turns out, that this is not our package's bug or limitation. Actually, vue-loader itself does not support lazy-img tag by default. And you can easily fix that.

Basically vue-loader's default tag/attribute combinations for transforming assets urls are:

transformAssetUrls: {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: 'xlink:href'
}

All you have to do is to add our lazy-img tag with src attribute to the vue-loader's transformAssetUrls option in your webpack config. So you would have:

transformAssetUrls: {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: 'xlink:href',
  'lazy-img': 'src'
}

And then, everything just magically works.

Source: https://vue-loader.vuejs.org/options.html#transformasseturls

By the way, if you're using older vue-loader's version <=14 the option is called transformToRequire and not transformAssetUrls.