请基于vue写一段将blob转换成src的代码

可以参考以下代码：<template>
<div>
<img :src="imageSrc" />
</div>
</template><script>
export default {
data () {
return {
imageSrc: ''
}
},
methods: {
async getImage (blob) {
const objectURL = window.URL.createObjectURL(blob)
this.imageSrc = objectURL
}
}
}
</script>

相关问题

帮我写一段vite+vue3 根据Blob在线浏览pdf的代码

当然可以，以下是代码：

<template>
  <div>
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="100%"/>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'PdfViewer',
  setup() {
    const pdfUrl = ref('')
    const getPdfUrl = async () => {
      const response = await fetch('https://example.com/sample.pdf') // 你要加载的 PDF 文件地址
      const blob = await response.blob()
      pdfUrl.value = URL.createObjectURL(blob)
    }
    onMounted(() => {
      getPdfUrl()
    })
    return { pdfUrl }
  }
}
</script>

代码解释：

1. 在 `setup()` 中，我们定义了一个 `pdfUrl` 变量，用于存储 PDF 文件的 URL。
2. 我们通过 `onMounted()` 钩子函数，在组件挂载后调用 `getPdfUrl()` 方法。
3. 在 `getPdfUrl()` 方法中，我们使用 `fetch()` 方法获取 PDF 文件的响应，并将其转换为 `blob` 对象。
4. 使用 `URL.createObjectURL()` 方法将 `blob` 对象转换为可访问的 URL，并将其赋值给 `pdfUrl` 变量。
5. 在模板中，我们使用 `embed` 标签将 PDF 文件显示在页面上，并将 `pdfUrl` 变量作为 `src` 属性传入。

vue中base64转换图片

在Vue.js中，将Base64编码的字符串转换为图片通常涉及到两个步骤：首先，你需要解析Base64字符串，然后将其设置为HTML元素的src属性。这里有一个简单的例子：

// 假设你有一个Base64字符串
const base64Image = 'data:image/jpeg;base64,/9j/4AAQSk...'; // 这里省略实际的Base64内容

// 使用Blob和FileReader API解码Base64
let dataURL = atob(base64Image.split(','));
let buffer = new Uint8Array(dataURL.length);
for (let i = 0; i < dataURL.length; i++) {
  buffer[i] = dataURL.charCodeAt(i);
}

// 创建一个Blob对象
let blob = new Blob([buffer], {type: 'image/jpeg'});

// 将Blob转换为File对象以便设置src属性
let file = URL.createObjectURL(blob);

// 更新HTML元素，例如img标签的src属性
this.myImage.src = file;

在这个示例中，`myImage`是一个Vue组件内的img元素。当你需要显示Base64图片时，只需要运行这段代码即可。