如何通过js获取src图片？

Question

我想获取 src 图像并将其绑定到我的 img 标签，我会在 JS 文件中创建它并导入，但什么也没发生，第一个文件是 About.vue，第二个是我的 utils 文件

p>

<template>
  <div>
    <Header></Header>
    <main>
      <section v-if="this.showAlert">
        <b-alert show variant="success">
          <h4 class="alert-heading">Well done!</h4>
          <p>
            This web-app was made by Gabriel Nunes, he did it all by himself.
            All these buttons and headers that you saw on the app, was made by
            him too.
          </p>
          <hr />
          <p class="mb-0">
            If you need anything from him, please contact via social netorks.
            Social networks:
            <img
              :src="this.showImg.facebook.src"
              :width="this.showImg.facebook.width"
              :height="this.showImg.facebook.height"
            />
          </p>
          <p class="mb-1">
            <img
              :src="this.showImg.github.src"
              :width="this.showImg.github.width"
              :height="this.showImg.github.height"
            />
          </p>
        </b-alert>
      </section>

      <section v-if="!this.showAlert">
        <b-alert show variant="secondary">
          <h4 class="alert-heading">Well done!</h4>
          <p>
            Aww yeah, you successfully read this important alert message. This
            example text is going to run a bit longer so that you can see how
            spacing within an alert works with this kind of content.
          </p>
          <hr />
          <p class="mb-0">
            Whenever you need to, be sure to use margin utilities to keep things
            nice and tidy.
          </p>
        </b-alert>
      </section>
    </main>
  </div>
</template>

<script>
import Header from "./Header.vue";
import { pathImgObj } from "../../utils.js";
export default {
  components: {
    Header,
  },
  data() {
    return {
      showImg: {},
      showAlert: Boolean,
    };
  },
  created() {
    this.showAlert = confirm("Are you sure about this?");
    this.showImg = { ...pathImgObj };
  },
  methods: {},
};
</script>

<style>
</style>

实用程序文件js

export const config = {
  home: 'Home',
  anime: 'Animes',
  faq: 'FAQs',
  about: 'About'
}
export const pathImgObj = {
  facebook: {
    src: `./assets/img/facebook.png`,
    width: '30px',
    height: '30px'
  },
  github: {
    src: `./assets/img/github.png`,
    height: '30px',
    width: '30px'
  }
}

预期结果：从 utils 文件中获取 src、宽度和高度并将其传递给我的 About.vue 我该怎么做？

我的结果：

Answer 1

当 URL 是 required 或 imported 时，Webpack 会处理 URL，并决定如何处理它。对于图像 URL，Webpack 找到图像，对其进行转换（例如，图像缩放和优化），将结果放入输出目录，并返回结果的 URL（例如，dist/img/foo.abcd123.jpg）。

vue-loader 自动 requires only static URLs of <img>.src:

<img src="@/assets/foo.jpg"> ✅

<img :src="'@/assets/' + imgUrl1"> ❌
<img :src="imgUrl2"> ❌

export default {
  data() {
    return {
      imgUrl1: 'foo.jpg',
      imgUrl2: '@/assets/foo.jpg',
    }
  }
}

动态绑定<img>.src 必须在绑定值或<script> 块中手动required：

<img :src="require('@/assets/' + imgUrl1)"> ✅
<img :src="require(imgUrl2)"> ✅
<img :src="imgUrl3"> ✅

export default {
  data() {
    return {
      imgUrl1: 'foo.jpg',
      imgUrl2: '@/assets/foo.jpg',
      imgUrl3: require('@/assets/foo.jpg'),
    }
  }
}

由于 utils 文件中的 URL 是在模板中动态绑定的，vue-loader 不会 require 它们，因此它们在 public/ 中被视为 static assets。例如，./assets/foo.jpg 的静态 URL 指的是 public/assets/foo.jpg。