使用 webpack 动态加载图片

Question

我是运行 AWS S3 上的 webpack 网络应用程序，我必须动态显示图像。感谢 :

我找到了以下代码

getImgUrl(nameImage) {
    let images = require.context("../static/images/members/", false, /\.jpg$/);
    return images("./" + nameImage + ".jpg");
}

在我的 vuetify 模板中：

<template v-else-if="activeTab == 0">
    <img
       :src="getImgUrl(chunk[i-1])"
    />
</template>

问题是图像没有加载为我的 aws 服务器 returns 跨源时出现 403 禁止错误严格源。

这很奇怪，因为我用这段代码加载到顶部栏的另一张图片没有任何问题：

<v-img
    :alt="appName"
    class="shrink mr-2"
    contain
   :src="require('../static/images/logo.jpg').default"
   width="40"
   height="40" 
/>

您是否知道我如何动态请求我的图像？

Answer 1

没关系，我只需要将 .default 添加到 return 的值：

getImgUrl(nameImage) {
    let images = require.context("../static/images/members/", false, /\.jpg$/);
    return images("./" + nameImage + ".jpg").default;
}

记住孩子们：如果 require() 不起作用，只需在末尾添加 .default #SuperSmart

说实话，我不明白为什么我必须这样做，但如果你知道，请随时在评论中告诉我

使用 webpack 动态加载图片

Load images dynamically with webpack

javascript

webpack

webpack-dev-server

vuetify.js