如何使用S3存储桶URL作为组件上图像的基本URL

Question

我正在使用S3存储桶保存用户的个人资料图片和他们正在上传的图片。在我的组件上，我想使用S3存储桶的图片库网址

我在main.js上声明了一个变量

window.s3bucket = 'https://myassets.s3.us-east-2.amazonaws.com';

，然后在组件中，我尝试将其用作：

<img alt=""  :src="s3bucket+'/user/'+ userimage">

但是由于未定义s3bucket或它不是函数，我遇到了错误。

Answer 1

正确。如果您不在UMD环境中，请不要将变量挂在窗外。

相反，您可以直接将其分配给vue：

Vue.prototype.$s3bucket =  'https://myassets.s3.us-east-2.amazonaws.com';

请注意，我在上面使用了$，因此您不会发生潜在的冲突。

然后只使用：

:src=`${$s3bucket}/user/${userimage}...`

（您不必使用模板字符串，我只喜欢语法）