加载动态资源vuejs 3

Question

我需要从 vuejs 项目中的 asset 文件夹动态加载和显示图像，但它不起作用，这是我的代码

这不起作用：

<img :src="getSource(data.thumbnail)" :alt="data.name"/>


   getSource(path){
      return new URL(`@/assets/${path}`, import.meta.url).href;
    }

但是如果我静态使用相同的代码和 URL，它就可以工作...:

<img :src="getSource(data.thumbnail)" :alt="data.name"/>


   getSource(path){
      return new URL("@/assets/moon-mode-thumbnail.jpg", import.meta.url).href;
    }

我需要投射

@/assets/${path}

之类的吗？

Answer 1

我找到了一个解决方案，它可以在 vuejs 3 中动态地从资源中加载图像，这里是：

模板

<img :src="getSrc(data.thumbnail)" :alt="data.name"/>

脚本

getSrc(path){
      let src = require.context('@/assets/', false);
      return src('./' + path );
    }

Answer 2

导入.meta.resolve(

@/assets/${path}

)