We are working on a website which is running with Sage 10 and Bedrock.
Now we have the problem that the URL of the images in the assets folder are not working.
We did add the image netherlands.png in the folder web/app/themes/abs/resources/images/netherlands.png
Now we use the following code to get the image url @asset('images/netherlands.png').
On the page it returns as following url https://abs.test/app/themes/abs/public/images/netherlands.png but when we visit the url it is not working, it just returns to the homepage.
We are working with Laravel Valet as our local development stack.
Does anybody know why the images are not working? We did use Sage 10 alone without Bedrock without any issues.
If this current behaviour with flattened file output turns out to be a feature and not a bug the above would be a future proof solution. (staying on bud v 5.8.7)
Donât think this is approach scales. If you had images under resources/images and resources/images/maps and say there were two image files both called map.png in both of the directories. When you build, under public youâd end up having two distinct files map.[hash1].png and map.[hash2].png, which is all good, but in public/manifest.json youâd have entry only for one of them, the one from the subfolder.
So when you do @asset(âmap.pngâ) only the image from the subfolder will ever be shown. There is no way to reference the image from resources/images in this scenario.
I donât have a great grasp of Budâs internals, so I canât speak to the reasoning behind this decision or if thereâs a simpler way to modify it, but the Bud docs mention a way to bypass the assets() API if you want:
// This doesn't appear to return a chainable object, so add it after your initial definition.
app.extensions.get('copy-webpack-plugin').setOption('patterns', [
{
from: app.path('@src/images'),
},
]);
I tested this locally with a fresh Sage install, and it didnât flatten assets into a single folder, i.e.:
It seems I was able to fix my issue. This is my updated bud.config.js file:
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
const bs = require('browser-sync-webpack-plugin')
module.exports = async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
// .assets('images')
.assets({
from: app.path('@src/images'),
to: app.path('@dist/images'),
},
{
from: app.path('@src/fonts'),
to: app.path('@dist/fonts'),
})
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('index.php', 'resources/views/**/*', 'app/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This should be the URL you use to visit your local development server.
*/
.proxy(app.env.get('WP_HOME'))
.use({
name: 'browser-sync-webpack-plugin',
make: () => new bs({proxy: app.env.get('WP_HOME')}),
})
/**
* Development URL to be used in the browser.
*/
.serve({
host: app.env.get('ENC_DEVELOPMENT_DOMAIN'),
cert: app.env.get('ENC_DEVELOPMENT_SSL_CRT'),
key: app.env.get('ENC_DEVELOPMENT_SSL_KEY'),
});
};
@alwaysblank I am using bud 5.8.x and this is my whole bud.config.js file
I am missing something, because yours suggestion it is not working for me (it must be my fault).
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
const bs = require('browser-sync-webpack-plugin')
module.exports = async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['@scripts/app', '@styles/app'], editor: ['@scripts/editor', '@styles/editor'],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets('images')
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('index.php', 'resources/views/**/*', 'app/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This should be the URL you use to visit your local development server.
*/
.proxy(app.env.get('WP_HOME'))
.use({
name: 'browser-sync-webpack-plugin', make: () => new bs({proxy: app.env.get('WP_HOME')}),
})
/**
* Development URL to be used in the browser.
*/
.serve({
host: app.env.get('ENC_DEVELOPMENT_DOMAIN'),
cert: app.env.get('ENC_DEVELOPMENT_SSL_CRT'),
key: app.env.get('ENC_DEVELOPMENT_SSL_KEY'),
});
// This doesn't appear to return a chainable object, so add it after your initial definition.
app.extensions.get('copy-webpack-plugin').setOption('patterns', [
{
from: app.path('@src/images'),
},
]);
};
Thank you
