Using image src from asset variables

Question

I have a problem with images recently. Everything is ok until you have to show a list of images on the page.

The problem is that when we directly give an src for image with hardcoded string, it works with a url like ~/assets/any-image.png. But if I try to move url into any variable / object / array, I have to specify the :src="myVariable" which contains the URL.

The code for example:

<template>
  <div>
    Problem with images
    <img :src="image.url" alt="">
    <img :src='require(image.url)' alt="">
  </div>
</template>

<script>
export default {
  data () {
    return {
      image:
        {
          url: '~/assets/icon.png',
          type: 'asset'
        }
    }
  }

}
</script>

Here I tried using assets with ~ and @, also with and without slash. Of course the image exists in assets folder, but since the src url is provided via any variable (not directly), the assets url is not served and as a result the image url looks like host:port/~/assets/... which doesn't exist on the server.

In this example I've got an idea to replace image url with an object containing the url and its type (asset/static) and make checks if type asset, then use require(variable) but got the problem that "Cannot find module '~/assets/icon.png'"

Has anybody solved this problem?

Dan · Accepted Answer · 2020-12-05 13:25:19Z

3

You need to use require when binding to an asset variable image. For example:

<img :src="url">

url: require('@/assets/icon.png')

If your json contains only the filename, you can place require in the template:

<img :src="require('@/assets/' + url)">

url: 'icon.png'

edited Dec 5, 2020 at 13:25

answered Dec 3, 2020 at 15:29

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryoidenshi Aokigahara · Accepted Answer · 2020-12-03 17:45:02Z

1

Thanks to Dan with his answer I've got a final solution which is universal: Image contain it's link and type:

image: {
  url: '/any-asset-folder/image.png'
  type: 'asset'
}

Then with ternary operator result is

<img
  :src="image.type === 'asset' 
    ? require('@/assets'+image.url) 
    : image.url"
>

In this way I've got images working both if they are from assets or static or external :)

edited Dec 3, 2020 at 17:45

answered Dec 3, 2020 at 16:48

Ryoidenshi Aokigahara

1681 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using image src from asset variables

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related