问题描述
我正在处理需要在 Rails/Vue 项目中呈现的 3D Vista Tour Web 存储库。 这是从 3D vista 导出的所有文件。呈现虚拟导览的唯一方法是将这些文件上传到服务器上。
我在这里要做的是在我的 Vue 模板中渲染该项目。 (这是一个 Rails / VueJS App 项目)
<template>
<div id="vr-frame" v-html="compiledHtml"> </div>
</template>
<script>
import axios from 'axios';
export default {
name: 'vr',data() {
return {
fileName: "index.htm",input: ""
};
},computed: {
compiledHtml() {
return this.input;
}
},methods: {
loadFile() {
axios({
method: "get",url: "../../assets/tours/v1/" + this.fileName
})
.then(result => {
this.input = result.data;
})
.catch(error => {
console.error("error getting file");
});
}
},}
</script>
我仍然不知道这是否真的可行,到目前为止我也不知道它似乎也不起作用。
将外部 Web 项目加载和呈现到 VueJS 模板中的正确方法是什么,API 是否适合这种情况?
谢谢
解决方法
您将无法使用 v-html
执行此操作,因为您正在尝试加载整个 html 页面,而不仅仅是一些 html 内容。相反,请尝试使用带有 srcdoc 属性的 iframe:
<template>
<iframe :srcdoc="compiledHtml" :src="fileName"></iframe>
</template>
<script>
import axios from 'axios';
export default {
name: 'vr',data() {
return {
fileName: "index.htm",compiledHTML: ""
};
},methods: {
loadFile() {
axios({
method: "get",url: "../../assets/tours/v1/" + this.fileName
})
.then(result => {
this.compiledHTML = result.data;
})
.catch(error => {
console.error("error getting file");
});
}
},}
</script>