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

Question

我开始在 Javascript 中大量使用 innerHTML。我也刚刚开始使用 Parcel Bundler。

我的问题是我的所有 href 链接和 img src 文件路径在使用 innerHTML 时似乎都不起作用。

我还应该提到 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>