VUEJS i want import image file directly in variable

Question

i want import image file from specific link into my vue variable can someone help me i tried with required but it doesn't work this.imagefile = require(linkofimage) does anyone know how to solve it

Answer 1

I suggest you to import first the images as constants and assign them to your vue data properties in hooks or methods:

<template>
  <div>
    <img :src="imageDirect" alt="alert">
    <img :src="imageOnHook" alt="alert">
    <img :src="imageOnMethod" alt="alert">
    <img :src="imageRequire" alt="alert">
  </div>
</template>

<script>
const image = require('@/assets/alert_logo_card.png')
export default {
  data: () => ({
    imageDirect: image,
    imageOnHook: null,
    imageOnMethod: null,
    imageRequire: null,
  }),
  mounted() {
    this.imageOnHook = image
    this.imageRequire = require('@/assets/alert_logo_card.png')
    this.assignImage()
  },
  methods: {
    assignImage() {
      this.imageOnMethod = this.imageDirect
    }
  }
}
</script>

I'm using the same image just for example purpose.

Something like this also will work:

methods: {
  assignImage() {
    this.imageOnMethod = this.imageDirect
  }
}

Showing an image from the network:

<template>
  <div>
    <img :src="imageFromUrl" alt="alert" width="200" height="200">
  </div>
</template>
<script>
export default {
  data: () => ({
    imageFromUrl: null
  }),
  mounted() {
    setTimeout(() => {
      this.requestImage()
    }, 2000);
  },
  methods: {
    requestImage() {
      const responseFromNetwork = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Google_Photos_icon_%282020%29.svg/1024px-Google_Photos_icon_%282020%29.svg.png'
      this.imageFromUrl = responseFromNetwork
    }
  }
}
</script>