英文:
How do I shorten an <img> source in JavaScript?
问题
目前我正在制作一个游戏，我想检查我的 HTML 元素 document.getElementById("terminal").src 是否等于 sprites/terminal.png.... 因为我使用 Visual Studio Code 的 Live Server，所以 document.getElementById("terminal").src 实际上等于 http://127.0.0.1:5500/sprites/terminal.png。是否有办法改变这个，或者至少缩短 .src，去掉 http://127.0.0.1:5500，只留下 sprites/terminal.png。
谢谢。
英文:
Currently I am making a game, and I want to check if my html element 'document.getElementById("terminal").src' is equal to "sprites/terminal.png"....
Because I use a live server via visual studio code, the "document.getElementById("terminal").src" is actually equal to 'http://127.0.0.1:5500/sprites/terminal.png'. Is there a way to change this or at least shorten the '.src' to exclude 'http://127.0.0.1:5500', and just be 'sprites/terminal.png'.
Thanks
答案1
得分: 2
我认为使用URL()构造函数会得到最确定的结果：
const { src = ''} = document.getElementById('terminal');
const path = new URL(src).pathname;
console.log(path);
<img id='terminal' src='http://127.0.0.1:5500/sprites/terminal.png' alt='terminal' />
英文:
I think the most certain result would be received by using URL() constructor:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const { src = ''} = document.getElementById('terminal');
const path = new URL(src).pathname;
console.log(path);
<!-- language: lang-html -->
<img id='terminal' src='http://127.0.0.1:5500/sprites/terminal.png' alt='terminal' />
<!-- end snippet -->
答案2
得分: 2
如果不使用src属性，您还可以检查src属性，因为浏览器不会将其重写为绝对URL，因此它将与HTML源代码中的内容完全相同：
if (document.getElementById("terminal").getAttribute('src') === 'sprites/terminal.png') {
// 做一些操作
}
英文:
Instead of the src property, you could also check the src attribute, which the browser does not rewrite to an absolute URL so it will be exactly as in the HTML source:
if (document.getElementById("terminal").getAttribute('src') === 'sprites/terminal.png') {
// Do stuff
}
答案3
得分: 1
你可以查看以下链接，了解通用的URL提取方法：
https://stackoverflow.com/questions/6263454/get-relative-url-from-absolute-url
对于你的情况，你也可以这样做：
document.getElementById("terminal").src.replace(window.origin, '')
这将返回不包含源的路径，然后你可以将其赋值回到src属性中：
const terminalDOM = document.getElementById("terminal");
terminalDOM.src = terminalDOM.src.replace(window.origin, '')
英文:
You can take a look on
https://stackoverflow.com/questions/6263454/get-relative-url-from-absolute-url
For a general URL extraction.
in your case, you can also do the follow:
document.getElementById("terminal").src.replace(window.origin, '')
which will return the path without the origin, then you can assign it back to the src:
const terminalDOM = document.getElementById("terminal");
terminalDOM.src = terminalDOM.src.replace(window.origin, '')
答案4
得分: 1
你可以在JavaScript中使用URL类来获取pathname。
const image_source = document.getElementById("terminal").src;
const url = new URL(image_source);
console.log(url.pathname); //输出：'/sprites/terminal.png';
// 如果你想跳过第一个斜杠，你可以使用substring
console.log(url.pathname.substring(1)); //输出：'sprites/terminal.png';
英文:
You can use the URL class in JavaScript to get the pathname.
const image_source = document.getElementById("terminal").src;
const url = new URL(image_source);
console.log(url.pathname); //Output: '/sprites/terminal.png'
// if you want to skip the first slash, you can use substring
console.log(url.pathname.substring(1)); //Output: 'sprites/terminal.png'
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论