为什么我所有的文件路径都被innerHTML破坏了？

Question

我开始在Javascript中大量使用innerHTML。 我也刚开始使用包裹捆绑器。

我的问题是，在使用innerHTML时，我的所有href链接和img src文件路径似乎都无法正常工作。

我还应该提到html文件中已经存在的img链接工作正常。并且我使用./作为分配给同一html文件的innerHTML，所以看不到任何文件路径问题。此外，如果我将JS文件中的innerHTML复制并粘贴到HTML文件中，则图像可以正常工作，因此绝对不是文件路径问题。

有很多代码，所以我宁愿不要用一行一行地填充这个问题，但是我认为这是相关的代码：

我正在使用grid-template-areas和flexbox。 “主要”是我的模板区域之一。

HTML：

<main>
  <div class="list-box">
    <div class="nav-panel">
      <a class="nav-div-l nav-pic-bg hover"><img class="nav-pic-l nav-img" src="./img/arrow-left.png" alt="Logout Arrow">
      <h2 id="logout-btn">Logout</h2></a>
      <a id="user-btn" class="nav-div-c hover"><img class="nav-pic-c nav-img" src="./img/user.jpg" alt="User Picture">
      <h2>Username</h2></a>
      <a id="settings-btn" class="nav-div-r hover hide-mobile"><h2>Settings</h2>
      <img class="nav-pic-r nav-img settings-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
      <a class="settings-btn hide-desktop"><img class="nav-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
    </div>
    <div id="settings"></div>
    <div id="user"></div>
    <div id="lists"></div>
  </div>
</main>

在此JS文件的顶部，您会注意到模块导入。这只是网站的JS数据。

JS：

import data from './data.js';

const settingsBtn = document.getElementById('settings-btn'); // nav links
const logoutBtn = document.getElementById('logout-btn');
const userBtn = document.getElementById('user-btn');

const lists = document.getElementById('lists');
const settings = document.getElementById('settings');
const user = document.getElementById('user');

logoutBtn.addEventListener('click', () => {  // change to lists page
  displayLists();
  settingsBtn.style.display = 'flex';
  logoutBtn.innerHTML = 'Logout';
  userBtn.style.display = 'flex';

  settings.innerHTML = '';
  user.innerHTML = '';
});

userBtn.addEventListener('click', () => {  // change to user page
  displayUser();
  settingsBtn.style.display = 'flex';
  logoutBtn.innerHTML = 'Back';
  userBtn.style.display = 'none';

  lists.innerHTML = '';
  settings.innerHTML = '';
});

settingsBtn.addEventListener('click', () => {  // change to settings page
  displaySettings();
  settingsBtn.style.display = 'none';
  logoutBtn.innerHTML = 'Back';
  userBtn.style.display = 'flex';

  lists.innerHTML = '';
  user.innerHTML = '';
});

const displayLists = () => {  // lists
  lists.innerHTML += `
  <div class="category-panel hide-mobile">
    <h3>Name:</h3>
    <div class="category-sections">
      <div class="category-l"><h3>Items:</h3></div>
      <div class="category-c"><h3>Reminders:</h3></div>
      <div class="category-r"><h3>Created:</h3></div>
    </div>
  </div>
  `;

  for (let i = 0; i < data.lists.length; i++) {
    let obj = eval(data.lists[i]);
    let totalReminders = getTotalReminders(obj);

    lists.innerHTML += `
      <a href="./list.html">
        <div class="list-item">
          <p>${obj.name}</p>
          <div class="category-sections">
            <p class="category-circle-border">${obj.items.length}</p>
            <p class="category-circle-border">${totalReminders}</p>
            <p class="date-width">${obj.created}</p>
          </div>
        </div>
      </a>
    `;
  }
};

const getTotalReminders = passed => {
  let total = 0;

  for (let i = 0; i < passed.items.length; i++) {
    total += passed.items[i].reminders;
  }

  return total;
};

displayLists();

const displaySettings = () => {
  settings.innerHTML = `
  <div class="row-auto">
    <div class="flex-column hover">
      <img class="api-img" src="./img/apple.png" alt="Apple Logo">
      <div class="flex">
        <h3>Connected</h3>
        <div class="circle api-colour-online"></div>
      </div>
    </div>
    <div class="flex-column hover">
      <img class="api-img" src="./img/windows.png" alt="Windows Logo">
      <div class="flex">
        <h3>Connected</h3>
        <div class="circle api-colour-online"></div>
      </div>
    </div>
    <div class="flex-column hover">
      <img class="api-img" src="./img/android.png" alt="Android Logo">
      <div class="flex">
        <h3>Not Connected</h3>
        <div class="circle api-colour-offline"></div>
      </div>
    </div>
    <div class="flex-column hover">
      <img class="api-img" src="./img/google.png" alt="Google Logo">
      <div class="flex">
        <h3>Connected</h3>
        <div class="circle api-colour-online"></div>
      </div>
    </div>
  </div>
  <div class="row-auto-c">
    <h3>Background:</h3>
  </div>
  <div class="flex settings-bg-contain-padding">
    <img class="settings-bg-pic hover" src="./img/background-0.jpg" alt="Background 1">
    <img class="settings-bg-pic hover" src="./img/background-1.jpg" alt="Background 2">
    <img class="settings-bg-pic hover" src="./img/background-2.jpg" alt="Background 3">
    <img class="settings-bg-pic hover" src="./img/background-3.jpg" alt="Background 4">
    <img class="settings-bg-pic hover" src="./img/background-4.jpg" alt="Background 5">
    <img class="settings-bg-pic hover" src="./img/background-5.jpg" alt="Background 6">
    <div class="hover">
      <img class="settings-bg-pic-upload" src="./img/background-0.jpg" alt="Arrow Up">
      <p class="black-text">Upload</p>
    </div>
  </div>
  <div class="row-auto">
    <div class="flex-column">
      <h3>Background On</h3>
      <div class="slider">
        <div class="slider-back"></div>
        <div class="slider-circle"></div>
      </div>
    </div>
    <div class="flex-column">
      <h3>Random Slider</h3>
      <div class="slider">
        <div class="slider-back"></div>
        <div class="slider-circle"></div>
      </div>
    </div>
    <div class="flex-column">
      <h3>24h Time</h3>
      <div class="slider">
        <div class="slider-back"></div>
        <div class="slider-circle"></div>
      </div>
    </div>
  </div>
  `;

  const getBG = document.getElementsByClassName('settings-bg-pic');

  const changeBG = BG => {  // settings background change
    for (let i = 0; i < BG.length; i++) {
      BG[i].addEventListener('click', () => {
        document.body.style.backgroundImage = `url(./img/background-${[i]}.jpg)`;
      });
    }
  };

  changeBG(getBG);

  const slide = document.querySelectorAll('.slider');

  const sliders = (slide) => {  // sliders
    slide.forEach(slider => slider.addEventListener('click', (i) => {
      i.currentTarget.querySelector('.slider-circle').classList.toggle('slider-checked');
    }));
  };

  sliders(slide);
}

const displayUser = () => {
  user.innerHTML = ``;
}

运行Parcel Bundler时，如果我单击链接，它只会重新加载页面，并且所有img都被替换为alt显示。

Answer 1

好的，我找到了解决方案。问题出在Parcel Bundler以及它如何将img文件捆绑到dist文件夹中。它不喜欢简单地将img src文件路径放入innerHTML中。它希望您将img本身导入到JS中。这是我的解决方案：

import arrowUp from '../img/arrow-up.png';
import arrowDown from '../img/arrow-down.png';
import arrowLeft from '../img/arrow-left.png';
import arrowRight from '../img/arrow-right.png';

import user from '../img/user.jpg';

import apiApple from '../img/apple.png';
import apiWindows from '../img/windows.png';
import apiAndroid from '../img/android.png';
import apiGoogle from '../img/google.png';

import plus from '../img/add.png';
import tick from '../img/tick-green.png';
import cog from '../img/cog.png';
import bin from '../img/bin.png';
import doc from '../img/document.png';
import lock from '../img/lock.png';
import png from '../img/save.png';

import BG0 from '../img/background-0.jpg';
import BG1 from '../img/background-1.jpg';
import BG2 from '../img/background-2.jpg';
import BG3 from '../img/background-3.jpg';
import BG4 from '../img/background-4.jpg';
import BG5 from '../img/background-5.jpg';

import fb from '../img/facebook.png';
import insta from '../img/insta.png';
import twitter from '../img/twitter.png';

module.exports = {
  arrows: [
    arrowUp, arrowDown, arrowLeft, arrowRight,
  ],

  symbols: [
    plus, tick, cog, bin, doc, lock, png,
  ],

  user: [
    user,
  ],

  bgImg: [
    BG0, BG1, BG2, BG3, BG4, BG5,
  ],

  apiImg: [
    apiApple, apiWindows, apiAndroid, apiGoogle,
  ],

  footer: [
    fb, insta, twitter,
  ],
}

主要JS：

import img from './images.js';

<div class="flex settings-bg-contain-padding">
  <img class="settings-bg-pic hover" src="${img.bgImgs[0]}" alt="Background 1">
  <img class="settings-bg-pic hover" src="${img.bgImgs[1]}" alt="Background 2">
  <img class="settings-bg-pic hover" src="${img.bgImgs[2]}" alt="Background 3">
  <img class="settings-bg-pic hover" src="${img.bgImgs[3]}" alt="Background 4">
  <img class="settings-bg-pic hover" src="${img.bgImgs[4]}" alt="Background 5">
  <img class="settings-bg-pic hover" src="${img.bgImgs[5]}" alt="Background 6">
  <div class="hover">
    <img class="settings-bg-pic-upload" src="${img.bgImgs[0]}" alt="Arrow Up">
    <p class="black-text">Upload</p>
  </div>
</div>