在 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 该文件才能使用它。 Docs.

// 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}">`;

在 app.js Symfony 4 文件中加载资源

Loading an asset within the app.js Symfony 4 file

javascript

symfony

webpack

webpack-encore

symfony4