Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Uso de Mídia do AWS S3 | Visão Geral do AWS S3
Introdução à Computação em Nuvem

book
Uso de Mídia do AWS S3

Let's learn how to upload and use media files in our bucket.

First, we need to open the Objects tab and click the Upload button:

We will be presented with a menu where we can select files or a folder containing files for upload. Currently, for us, S3 operates similarly to Google Drive, for example.

You need to select any image and upload it to the platform; in our case, it will be a picture of a turtle.

After uploading, we open the uploaded file, and the following information appears:

By the way, here's what our turtle looks like this:

How to use this image in our projects?

To use this file, we have already configured the bucket correctly so that we can access it from any source.

Let's write a small HTML page with a space for this photo.

We can insert the photo using a link in the <img> tag in HTML.

The code for this photo will look like this:

html

index.html

copy
<img src='https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/turtle.png'>

As you can see, when the code is executed, the photo of this turtle is displayed for us.

All we did was write a link to the picture of our turtle in the HTML tag.

You can also directly access this image by following this link.

Now, let's write a small HTML page where we describe the turtle and give the user the opportunity to feed it.

The code will look like this:

html

index.html

copy
<style>
.greeting {
font-size: 24px;
margin-top: 20px;
font-weight: bold;
}
.turtle-image {
display: block;
margin: 20px auto;
width: 30%;
max-width: 300px;
height: auto;
}
.button {
background-color: #4caf50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 12px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.button:hover {
transform: scale(1.05);
background-color: #367b37;
}
.button.ignore {
background-color: #f44336;
}
.button.ignore:hover {
background-color: #d32f2f;

For your convenience, I've also added the code for the turtle page to a block on the website:

Thus, we can embed various media that we uploaded to S3 into our HTML pages, just like we did with the turtle image. We simply insert the image link into the img tag, and we get the result.

Great job!

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

We use cookies to make your experience better!
some-alt