使用 webpack 动态加载图像

发布于 2025-01-10 13:04:56 字数 825 浏览 0 评论 0原文

我正在 AWS S3 上运行 webpack Web 应用程序，并且必须动态显示图像。感谢这篇文章，我找到了以下代码：

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 服务器在跨源时返回 403 Forbidden 错误 strict origin 。

这很奇怪，因为我对使用以下代码加载到顶栏中的另一张图像没有任何问题：

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

您有任何其他想法如何动态地需要我的图像吗？

原文

I'm running a webpack web app on AWS S3 and I have to dynamically show images. I found this following code thanks to this post:

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

And in my vuetify template:

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

The problem is the images are not loaded as my aws server returns a 403 Forbidden error strict origin when cross origin.

That's weird because I don't have any problem with another image that I load in my topbar with this code:

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

Do you have any other idea how I could require my images dynamically ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

玩心态 2025-01-17 13:04:56

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

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

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

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

Nevermind, I just had to add .default to the value to return:

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

Remember kids: if require() doesn't work, just add .default at the end #SuperSmart

To be true I didn't understand why I had to do this, but if you know feel free to tell me in the comments

回复收藏 0 原文

~没有更多了~