图片未加载 vue.js

Question

我正在尝试通过创建基本方法在我的 vue.js 项目中动态生成图像：

  methods: {
    changeLang(la
    getImg(image, ext) {
      return '~@/assets/images/' + image + '.' + ext;
    },
      ...

每个组件都会动态生成图像：

data () {
    return {
      cat:'frenchcat',
      ...

下面这行要识别方法、图像和日期并将其转换成图像URL

<img v-bind:src="getImg(cat, 'svg')" v-bind:alt=cat>

但由于某些原因，源代码只是 returns:

<img data-v-61dd7a3d src="~@/assets/images/frenchcat.svg" alt="frenchcat"/>

为什么 ~@/assets/ 没有被转换成 URL 路径？

Answer 1

您需要将 require 与 v-bind:src 一起使用：

getImg(image, ext) {
      return require(`~@/assets/images/${image}.${ext}`);
}

不确定是否需要 @ 之前的 ~。

Image not loading in vue.js