在 app.js Symfony 4 文件中加載資產

Question

我希望在 app.js 中主流化某些資產加載

我的資產是這樣構建的： public/build/images/icons/**.svg

在我的 app.js 文件中，我有以下內容：

/*
* Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you require will output into a single css file (app.css in this case)
import '../sass/standards.scss';

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');

$(window).on("load", function() {
    $(".icon").each(function(){
        var $classes = $(this).prop("classList");

        var className;

        $.each($classes, function(){
            if(this.match("^icon-"))
            {
                className = this;
                return;
            }
        });

        className = String(className);
        var fileName = className.replace("icon-", "") + ".svg";

        $(this).load("public/build/images/icons/" + fileName);
    })
});

這個想法是找到任何.icon元素並將其注入到 assets 文件夾中的適當 SVG 文件中。 但問題是，還會發生一些緩存，因此文件名會更改以進行版本控制。 這是通過 app.js 文件調用資產的正確方法嗎？

什么是正確的方法？

Answer 1

您需要在使用之前require該文件。 文檔。

// assets/js/app.js

// returns the final, public path to this file
// path is relative to this file - e.g. assets/images/logo.png
const logoPath = require('../images/logo.png');

var html = `<img src="${logoPath}">`;