我有一些图像将显示在 React 应用程序中。我向服务器执行 GET 请求,该请求以 BLOB 格式返回图像。然后我将这些图像转换为 base64。最后,我在图像标签的 src 属性中设置这些 base64 字符串。
最近我开始使用 Fetch API。我想知道是否有办法在“一次”中进行转换。
下面是一个示例来解释我目前的想法和/或 Fetch API 是否可以实现这一点。我还没有在网上找到任何东西。
let reader = new window.FileReader();
fetch('http://localhost:3000/whatever')
.then(response => response.blob())
.then(myBlob => reader.readAsDataURL(myBlob))
.then(myBase64 => {
imagesString = myBase64
}).catch(error => {
//Lalala
})
Run Code Online (Sandbox Code Playgroud) 我一直在尝试在 Angular2 中创建打字机效果。
我的问题基本上是什么是最好的方法。我能够做到这一点的唯一方法是通过 CSS 动画。这还没有给我想要的结果。到目前为止,我已经尝试了三种方法。
CSS 方法
创建了一个带有单独样式表的组件。
@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);
.typewriter h2 {
margin: 0 auto;
border-right: .15em solid white;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
animation: typewriter 2.5s steps(28) 1s 1 normal both,
blinkTextCursor 500ms steps(28) infinite normal;
}
@keyframes typewriter{
from { width: 0 }
to { width: 100% }
}
@keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
#typewriterbox {
display: inline-block;
}
Run Code Online (Sandbox Code Playgroud)
接下来是将在其中添加组件的 HTML。
<div class="page-title">
<animated-typing>CSS Typewriter effect</animated-typing>
</div>
Run Code Online (Sandbox Code Playgroud)
和组件文件:
import {Component} from …Run Code Online (Sandbox Code Playgroud)