Angular 7 / Ionic 4 - проблема пути к фоновому изображению

Question

Итак, у меня проблема с универсальной платформой Windows, где фоновое изображение никогда не будет отображаться.Это прекрасно работает для Android, iOS и браузеров в целом.

Это угловой проект 7 / Ionic 4.В файле scss я ссылаюсь на изображение следующим образом:

background-image: url('/assets/img/image.png');

Но универсальная платформа Windows не будет работать, если я не установлю:

background-image: url('./assets/img/image.png');

или

background-image: url('assets/img/image.png');

То, что работает для Windows, не для остальных.Любое решение, чтобы это исправить?

Answer 1

Попробуйте указать абсолютный путь вместо относительного.

Вместо background-image: url('./assets/img/image.png');

Используйте background-image: url('https://your-domain-name/assets/img/image.png');

Например,

Есливы работаете на localhost: 4200, тогда ваш код будет

background-image: url('https://localhost:4200/assets/img/image.png');

Дайте мне знать, если он работает на вас, ура!

Answer 2

Итак, я разработал обходной путь, который работает для меня.В основном я использую хук before_compile только для окон.Вот крючок, если кто-то задается вопросом:

module.exports = function (ctx) {

  var fs = ctx.requireCordovaModule('fs'),
    path = ctx.requireCordovaModule('path');

  var init = function(){
    console.log("Changing image path for Windows.");

    var filePath = path.join(ctx.opts.projectRoot + '/platforms/windows/www/');

    console.log("List of modified files: ");
    fs.readdirSync(filePath).forEach(file => {
      transformFile(filePath + file);
    });
  };


  var transformFile = function(filePath) {

    fs.stat(filePath, function (error, stat) {

      if (error || stat.isDirectory() ) {
          return;
      }

      var data = fs.readFileSync(filePath, 'utf8');

      if(data.indexOf('/assets/img') >= 0) {

        console.log(filePath);
        var result = data.replace(/\/assets\/img\//g,'assets/img/')

        fs.writeFileSync(filePath, result, 'utf8');
      }
    });
  };

  init();
};

Answer 3

Вы также пробовали

background-image: url ('../../ assets / img / image.png');