Static images in dev-server mode

[kszymukowicz]

hi

I have a question about static images in dev-server mode.

In documentation there is a part:

 .copyFiles({
        from: './src/images',
        // Optional target path, relative to the output dir
        to: 'images/[path][name].[ext]',
        includeSubdirectories: false,
        // if versioning is enabled, add the file hash too
        to: 'images/[path][name].[hash:8].[ext]',
        // only copy files matching this pattern
        pattern: /\.(png|jpg|jpeg)$/
    })

It's working well for build, but for dev-server all files in the destination folder are removed. I know that TYPO3 should prepend local url to all assets but it's not doing that for these static images.

I can see the static image in manifest.json.
I can access this static file with url https://t3base10.ddev.site:8080/typo3conf/ext/local/Resources/Public/Frontend/images/content/image-logo-200-150.png

So the problem is that viewhelper <f:image is not prepending the url https://t3base10.ddev.site:8080/ for his image.

I am using typo3_encore for some time already but had not notice this issue because I was forcing image processing even if the image had the same size.

So is this my misuse/bug or nobody is using static images in assets or nobody cares that is not working in dev-server mode?
Tnx!

[sabbelasichon]

@kszymukowicz Could you provide your whole config please. Then i will have a look into it. I am not using the dev-server, but should working as some people told me.

[kszymukowicz]

Sry for late reply.
Here it is.

const Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
}

Encore
    .setOutputPath('../../Public/Frontend/')
    .setPublicPath('/typo3conf/ext/local/Resources/Public/Frontend/')
    .addEntry('main', './src/js/main.js')
    .enableSingleRuntimeChunk()
    .splitEntryChunks()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVueLoader(() => {}, {runtimeCompilerBuild: false})
    .enableSassLoader()
    .enablePostCssLoader()
    .copyFiles({
        from: './src/images/content',
        to: './images/content/[path][name].[ext]'
    })
    .configureTerserPlugin((config) => {
        config.terserOptions = {...config.terserOptions, keep_classnames: true, keep_fnames: true}
    })
    .autoProvidejQuery()

module.exports = Encore.getWebpackConfig();

I tired also to change the target path of content images to be outside images folder (which is used by encore to put font svg files)

    .copyFiles({
        from: './src/images/content',
        to: './images-content/[path][name].[ext]'
    })

but this does not help.

On dev-server the only files in Public folder are entrypoints.json and manifest.json.

[kszymukowicz]

After great support of @sabbelasichon the solution is simple.

Just use VH encore:asset

<f:image src="{encore:asset(pathToFile: 'EXT:local/Resources/Public/Frontend/images/content/image-logo-200-150.png')}"

and this produces

<img class="img-responsive" alt="Home" src="https://example.ddev.site:8080/typo3conf/ext/local/Resources/Public/Frontend/images/content/image-logo-200-150.png">

in dev-server mode
and

<img class="img-responsive" alt="Home" src="/typo3conf/ext/local/Resources/Public/Frontend/images/content/image-logo-200-150.png">

in production mode.

[sabbelasichon]

@kszymukowicz Thanks for testing. I am gonna add this to the documentation.