VUEJS我想直接在变量中导入图像文件

Question

我想将特定链接中的图像文件导入我的 vue 变量，有人可以帮我吗 我尝试了 required 但它不起作用this.imagefile = require(linkofimage) 有人知道怎么解决吗

Answer 1

我建议您首先将图像作为常量导入，然后在钩子或方法中将它们分配给您的 vue 数据属性：

<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>

我使用相同的图像只是为了举例。

类似的方法也可以：

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

显示来自网络的图像：

<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>