react.js - iframe 不能访问src地址
本文介绍了react.js - iframe 不能访问src地址的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
无法访问iframe地址
index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react'
class App extends React.Component {
render() {
return (
<div>
<h1>Outside iFrame</h1>
<iframe title="myiframe" src="./target.html" width="600px" height="400px"></iframe>
</div>
)
}
}
export default App
target.html
<html>
<head></head>
<body>
<h1>Inside IFrame</h1>
</body>
</html>
index.html
<div id="root"></div>
为什么引入的是
<iframe title="myiframe" src="./target.html" width="600px" height="400px"></iframe>
而页面显示的是:
解决方案
我使用的是
CREATE-REACT-APP
加载image图片也不能直接使用路径
不是不能而是要使用 index.html文件的路径为基础
< img src="./logo.png"/>
可以引入
import a from "./img/a.png";
使用
<div><img src={a} /></div>
creat-react-app 如何在组件中的src引入路径
总结:
import根据当前文件路径为基础
src根据index.html路径为基础
这篇关于react.js - iframe 不能访问src地址的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文