我想在电子方面做一个应用。它的作用是从json文件中获取图像文件的名称，并将其加载到应用程序中。但它似乎不起作用。
这是我的javascript代码：
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
readTextFile("/home/kevin/my-electron-app/data/covers/covers.json", function(text){
var data = JSON.parse(text);
for (index in data) {
let cover_name = data[index]
for (indexA in cover_name) {
cover_nameA = cover_name[indexA]
var imageContainerDiv = document.createElement("div");
var coverImage = document.createElement("img");
coverImage.setAttribute("src", "data/covers/" + cover_nameA)
coverImage.setAttribute("class", "imageRight")
imageContainerDiv.appendChild(coverImage)
console.log(coverImage)
}
}
});如您所见，我首先创建了一个image元素，然后给它src属性和class属性，然后将其放入div中。
但当我启动应用程序时，图像不会加载。如果我从控制台复制图像标记并将其粘贴到html文件中，图像将加载，但不会像这样加载。
我已经试了好几个小时了，但还是没法用。我是电子新手（昨天刚开始），所以我知道的不多。
这是我的html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="fontawesome.min.css">
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;**script-src 'self' http://onlineerp.solution.quebec 'unsafe-inline' 'unsafe-eval';**">
</head>
<body>
<header>
<p class="title">Library</p>
</header>
<section>
<p class="dontShow">This is just a p tag</p>
<script type="text/json" id="coversJson" src="data/covers/covers.json"></script>
</section>
<footer>
<button class="libraryButton"><i class="fas fa-book-open"></i></button>
</footer>
<script type="text/javascript" src="./renderer.js"></script>
</body>
</html>css文件：
.title {
text-align: left;
color: rgb(235, 159, 235);
font-size: 20px;
}
body {
background-color: rgba(22, 24, 24, 0.966);
}
footer {
position: fixed;
bottom: 0;
}
.libraryButton {
position: relative;
width: 45px;
height: 45px;
top: 100;
}
.imageContainer {
padding: 15px;
}
.imageRight {
width: 175px;
height: 225px;
}
.imageLeft {
width: 175px;
height: 225px;
}
.dontShow {
display: none;
}任何帮助都将不胜感激。
暂无答案！
目前还没有任何答案，快来回答吧！