英文:
Change image source from JavaScript in spring boot
问题
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="zoomOut()">Zoom Out</button>
<button onclick="zoomIn()">Zoom In</button>
<br><br>
<img id="img1" src="../static/images/6car_1.png"; th:src="@{images/6car_1.png}"/>
</div>
<script>
var zoom = 6;
var initialPath = "../static/images/";
var count = 1;
var isPlaying = true;
playPhotos();
function playPause() {
if (isPlaying)
isPlaying = false;
else{
isPlaying = true;
playPhotos();
}
}
function playPhotos(){
var firstPart = initialPath + zoom + "car_" + count + ".png";
var secondPart = "@{images/" + zoom + "car_" + count + ".png}";
if(count <= 13){
document.getElementById("img1").src = firstPart;
th:src = secondPart;
count++;
}
else{
count = 1;
document.getElementById("img1").src = firstPart;
th:src = secondPart;
}
if(isPlaying){
setTimeout("playPhotos()", 200);
}
}
function zoomOut(){
if((zoom - 1) >= 1){
zoom--;
}
}
function zoomIn(){
if((zoom + 1) <= 10){
zoom++;
}
}
</script>
</body>
</html>
英文:
I am trying to change the source of an image in an html document every few seconds with a JavaScript function within a spring boot project but the typical way of changing the source does not appear to be working. I have tried to match the format of setting the image source with no luck either.
Here is where I initially set the source:
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="zoomOut()">Zoom Out</button>
<button onclick="zoomIn()">Zoom In</button>
<br><br>
<img id = "img1" src="../static/images/6car_1.png"; th:src="@{images/6car_1.png}"/>
</div>
<script>
var zoom = 6;
var initialPath = "../static/images/";
var count = 1;
var isPlaying = true;
playPhotos();
function playPause() {
if (isPlaying)
isPlaying = false;
else{
isPlaying = true;
playPhotos();
}
}
function playPhotos(){
var firstPart = initialPath + zoom + "car_" + count +".png"
var secondPart = "@{images/" + zoom + "car_" + count +".png}"
if(count <=13){
document.getElementById("img1").src = firstPart;
th:src = secondPart;
count++;
}
else{
count = 1;
document.getElementById("img1").src = firstPart;
th:src = secondPart;
}
if(isPlaying){
setTimeout("playPhotos()",200);
}
}
function zoomOut(){
if((zoom - 1) >= 1){
zoom--;
}
}
function zoomIn(){
if((zoom + 1) <= 10){
zoom++;
}
}
</script>
</body>
</html>
答案1
得分: 0
我编辑了它，它能够工作，因为我创建了变量"zoom"、"isPlaying"并调用了playPhotos()函数。你没有指定这些细节吗？如果除了函数操作之外还有错误，请将您的所有代码作为代码片段上传。我会相应地更新我的答案。
var initialPath = "../static/images/";
var count = 1;
var isPlaying = true;
let zoom = "zoom";
playPhotos()
function playPhotos() {
var firstPart = `${initialPath}${zoom}car_${count}.png`; // 尝试
var secondPart = `@{images/${zoom}car_${count}.png`; // 尝试
if (count <= 13) {
document.getElementById("img1").src = firstPart;
th: src = secondPart;
count++;
} else {
count = 1;
document.getElementById("img1").src = firstPart;
th: src = secondPart;
count++;
}
if (isPlaying) {
setTimeout("playPhotos()", 200);
}
}
<img id="img1" src="../static/images/6car_1.png" ; th:src="@{images/6car_1.png}" />
英文:
I edited it and it works because I created the variable "zoom" , "isPlaying" and called playPhotos (). You didn't specify those details ? If you have an error other than function operation, please upload all of your code as a snippet. I'll update my answer accordingly.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var initialPath = "../static/images/";
var count = 1;
var isPlaying = true;
let zoom = "zoom"
playPhotos()
function playPhotos() {
var firstPart = `${initialPath}${zoom}car_${count}.png`; //try
var secondPart = `@{images/${zoom}car_${count}.png`; // try
if (count <= 13) {
document.getElementById("img1").src = firstPart;
th: src = secondPart;
count++;
} else {
count = 1;
document.getElementById("img1").src = firstPart;
th: src = secondPart;
count++;
}
if (isPlaying) {
setTimeout("playPhotos()", 200);
}
}
<!-- language: lang-html -->
<img id="img1" src="../static/images/6car_1.png" ; th:src="@{images/6car_1.png}" />
<!-- end snippet -->
答案2
得分: 0
var secondPart = "/images/" + zoom + "car_" + count + ".png";
document.getElementById("img1").src = secondPart;
英文:
var secondPart = "/images/"+zoom+"car_"+count+".png";
document.getElementById("img1").src = secondPart;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论