我在 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 錯誤嚴格源。
這很奇怪,因為我使用以下代碼在我的頂部欄中加載的另一個影像沒有任何問題:
<v-img
:alt="appName"
class="shrink mr-2"
contain
:src="require('../static/images/logo.jpg').default"
width="40"
height="40"
/>
你有什么其他想法我可以動態地要求我的影像嗎?
uj5u.com熱心網友回復:
沒關系,我只需將 .default 添加到要回傳的值:
getImgUrl(nameImage) {
let images = require.context("../static/images/members/", false, /\.jpg$/);
return images("./" nameImage ".jpg").default;
}
記住孩子們:如果 require() 不起作用,只需在末尾添加 .default #SuperSmart
說實話,我不明白為什么我必須這樣做,但如果你知道,請隨時在評論中告訴我
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/436096.html
標籤:javascript 网页包 Vuetify.js webpack-开发服务器
