Window.location HTML页面未加载jpg图像
Window.location HTML页面未加载jpg图像
提问于 2018-06-07 10:07:58
我正在使用window.location，但是由于某种原因，我的图像无法加载到该页面？我已经检查了我的文件路径，一切正常。我的图像在我的主index.html文件中工作得很好，所以我假设这与我的新文件(window.location)有关。控制台显示“找不到错误图像”。
我想我漏掉了什么。我对window.location的特性还很陌生，有人能帮我吗？
JS：
<script>
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
var eyeColor = null;
function selectMenu1(value){
eyeColor = value;
}
var skinTone = null;
function selectMenu2(value){
skinTone = value;
}
function validate() {
if (eyeColor && skinTone){
alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
//////////////////////////
// extra conditions below
//////////////////////////
if (eyeColor=="brown" && skinTone=="fair"){
window.location = "brown/brown_fair.html";
} else if (eyeColor=="brown" && skinTone=="tan"){
alert("You should have w/e colour hair...");
}
}
else if (!eyeColor){
alert("Please pick an eye colour");
}
else if (!skinTone){
alert("Please pick a skin tone");
}
}
function initApplication(){
//setup dropdown menu selection events
Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
const menuCallbackName = menu.attributes.onchange.value;
const fetchedCallback = window[menuCallbackName] || null;
if (fetchedCallback){
Array.from(menu.children).forEach((child)=>{
const callbackValue = child.attributes.data ? child.attributes.data.value : null;
if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
});
} else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);
});
}
</script>window.location文件中的HTML
<div class="jumbotron text-center">
<h1 class="display-4" style="font-size: 2.5rem">Best Hair Color for: <br>
</h1>
<p class="lead">Brown Eyes & Fair Skin</p>
<hr class="my-4">
<img src="img/ash_brown.jpg">
<img src="img/medium_brown.jpg">
<img src="img/caramel_mix.jpg">
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>这是我的项目的结构：
回答 1
Stack Overflow用户
发布于 2018-06-07 10:48:25
您在HTML中使用了relative path：
<img src="img/ash_brown.jpg">
<img src="img/medium_brown.jpg">
<img src="img/caramel_mix.jpg">因此，您的浏览器将在当前位置查找'ash_brown.jpg‘...正如您的项目结构中所示，这不是您的图像所在的位置。
如果您更改了相对于网站根目录的图像位置，则应该可以：
<img src="/img/ash_brown.jpg">
<img src="/img/medium_brown.jpg">
<img src="/img/caramel_mix.jpg">考虑到img文件夹在您的网站的根文件夹中，它应该可以工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50732021
复制相关文章
相似问题