I working on Symfony project but when I want implement Tailwind I have problem when I want render images it return 404.. I went through the whole internet and found no answer please help me
btw. Rendering Image through url also not working
webpack.config.js
const path = require('path');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath(Encore.isProduction() ? '/build' : '/test/public/build')
.copyFiles([
{
from: './assets/images',
to: 'images/[path][name].[ext]',
}
])
.addEntry('app', './assets/app.js')
.enableStimulusBridge('./assets/controllers.json')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader()
.enablePostCssLoader((options) => {
options.postcssOptions = {
// the directory where the postcss.config.js file is stored
config: './postcss.config.js',
};
})
.splitEntryChunks()
.setPublicPath('/build')
;
module.exports = Encore.getWebpackConfig();
tailwind.config.js
purge: [
'./templates/**/*.html.twig',
'./assets/**/*.css',
'./assets/**/*.js',
'./assets/**/*.vue',
],
media: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
assets/app.js
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
// start the Stimulus application
import './bootstrap';
twig usage
<div >
<img src="{{ asset('images/avatar.png') }}" alt="">
</div>
CodePudding user response:
Ok so I fixed it, I don't know why, but I found this https://github.com/EresDev/HandwerkerFullstack/commit/3a1d9baf2caacf8e4b27404b111d47da1bd67a68
and just changed
.setPublicPath(Encore.isProduction() ? '/build' : '/test/public/build')
to
.setPublicPath('/build')
Maybe it will help