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

您也尝试过

背景图片：url（'../../ assets / img / image.png'）;

Answer 2

尝试给出绝对路径而不是相对路径。

代替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 3

因此，我设计了一种对我有效的解决方法。基本上，我只对Windows使用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();
};

Angular 7 / Ionic 4-背景图片网址路径问题

3 个答案: