JHipster i using the webpack to serve static files to users, but in my app i want images to load asynchronicly without webpack.
If i understand webpack correctly it is including all files that match the regexp and bundles them.
And any image file that lies in webapp folder will be included
This is the standart image-loader conf for jhipster app.
{
test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {
loader: 'image-webpack-loader',
query: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
}
}
}
]
}
I store the images url in database and wanted to use the spring resource handler to get the images.
Can anyone please tell me what is the correct way of writing the static resource path for jhipster defoult configuration.
I tryed to use /content/webapp/images/ ...
But it does not seem to work which is strange considered that all static files are located there.
Related
I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export".
But I get this Error:
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:
module.exports = {
images: {
loader: 'imgix',
path: '/images/',
},
}
I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.
I know this is probably a stupid question, but I'm stuck.
I hosted them on https://imgbb.com and wrote this in next.config.js
module.exports = {
images: {
domains: ['i.ibb.co'],
},
}
and it worked.
Usage:
<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg"
alt="ESMASA TRAVAUX"
width={1050}
height={500}
/>
I got this error when deploying Next.js to Netlify.
Error: Image Optimization using Next.js default loader is not compatible with `next export`.
Possible solutions:
6:47:15 AM: - Use `next start`, which starts the Image Optimization API.
6:47:15 AM: - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM: - Configure a third-party loader in `next.config.js`.
6:47:15 AM: - Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM: at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)
The problem does not occur when deploying to Vercel.
use akamai
setting images.loader to 'imgix' caused dev and build errors.
i used this instead:
// next.config.js
module.exports = {
images: {
loader: 'akamai',
path: '',
},
}
it just works for all i care about.
possible values for images.loader are: [ default, imgix, cloudinary, akamai, custom ]
reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders
From Next.js 12.3, you can completely disable next/image Image Optimization using the unoptimized configuration in next.config.js. This avoids having to use a third-party provider to optimize the image when using next/export.
From the next/image documentation:
unoptimized - When true, the source image will be served as-is
instead of changing quality, size, or format. Defaults to false.
module.exports = {
images: {
unoptimized: true
}
}
Before Next.js 12.3 and from 12.2, the unoptimized configuration was still experimental and could be enabled under the experimental flag.
module.exports = {
experimental: {
images: {
unoptimized: true
}
}
}
Seems you use next/images.
But next/images don't work with static pages (generated with next export)
For static pages use this image-optimizer : next-optimized-images instead
I faced the same problem when using next export command. I still receive this error:
Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start to run a server, which includes the Image Optimization API.
Use any provider which supports Image Optimization (like Vercel).
Configure a third-party loader in next.config.js.
Use the loader prop for next/image.
So, to make my custom loader working correctly, I needed
to set a path to an empty string:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '',
},
}
BUT, when I open the resultant index.html file, none of the images or JS loaded.
So, for those who facing this also, please try to set the path to a / as such:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '/',
},
}
This error is regarding Image/next, I was facing same error while "next build", than i use <img/> instead of <Image/> in the project and re-build it by npm run build and it resolves the error.
I am trying to run my rails 6 application in production, but facing internal server errors.
When I check the logs this is what I see:
ActionView::Template::Error (Webpacker can't find styles in /home/****/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.css": "/packs/css/application-8364df35.css",
"application.js": "/packs/js/application-2789a226d9ddcf2c59d1.js",
"application.js.map": "/packs/js/application-2789a226d9ddcf2c59d1.js.map",
"entrypoints": {
"application": {
"css": [
"/packs/css/application-8364df35.css"
],
"js": [
"/packs/js/application-2789a226d9ddcf2c59d1.js"
],
"js.map": [
"/packs/js/application-2789a226d9ddcf2c59d1.js.map"
]
}
}
}
When I check the server files everything is in there actually.
I am deploying via Capistrano and my server setup is nginx+puma.
Although everything works on localhost, I was not able to run server in production. Is there something I am missing?
Your stylesheet ”pack” is called ”application” (not ”styles”).
Replace stylesheet_pack_tag ’styles’ with stylesheet_pack_tag ’application’.
I'm trying to use fullcalendar plugin in my grails app and I'm getting a Resource not found for all the fullcalendar css and js files :
Error|
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.css
Resource not found: /plugins/full-calendar- 1.5.1.0/css/fullcalendar.print.css
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.css
Resource not found: /plugins/full-calendar- 1.5.1.0/css/fullcalendar.print.css
Resource not found: /plugins/full-calendar-1.5.1.0/js/fullcalendar.min.js
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.css
Resource not found: /plugins/full-calendar-1.5.1.0/css/fullcalendar.print.css
Resource not found: /plugins/full-calendar-1.5.1.0/js/fullcalendar.js
I'm using
compile ":full-calendar:1.5.1.0"
in grails 2.3.7
Ideally I guess it should look into the plugins/web-app/css or js folder in grails 2.3.7 where the actual files are present.
I'm including the fullcalendar using
<fullcal:resources/>
And grails clean did not do any magic this time.
Below is the fullCalendarResources.groovy config file
modules = {
'full-calendar' {
dependsOn 'jquery'
dependsOn 'jquery-ui'
resource url: [ plugin:'full-calendar', dir:'css/fullcalendar', file:'fullcalendar.css' ]
resource url: [ plugin:'full-calendar', dir:'css/fullcalendar', file:'fullcalendar.print.css' ], attrs: [ media: 'print' ]
resource url: [ plugin:'full-calendar', dir:'js/fullcalendar', file:'fullcalendar.js' ],
disposition:'head', nominify: true
}
}
My basic question is why is it looking in plugin/{plugin-name}/css instead of the web-app folder?
After doing a lot of permutations, this is what worked for me:
<g:javascript library="full-calendar"/>
<r:layoutResources/>
instead of
<fullcal:resources/>
in the head
EDIT :
A better way would be to add the fullcalender resources to ApplicationResources.groovy and manually add the js and css to /web-app to and add the application library to your page. As the grails plugin for fullcalender has not been updated.
We are using Grunt to compile and concatenate our typescript files into a single javascript file located in our distribution folder. That functionality is working properly, but Grunt also creates .map and .js files for every ts file it finds; auto-generating them in the same location as the TS files.
Is there a way to prevent grunt from making these extra files and just generate the output.js and output.map?
This is a snip of our grunt.js file.
ts: {
task : {
src: ["**/*.ts", "!node_modules/**/*.ts"],
out: 'app/dist/app.js'
},
options: {
fast: 'never'
}
},
watch: {
typescript: {
files: '**/**/*.ts',
tasks: ['ts']
},
sass: {
files: '**/**/*.scss',
tasks: ['sass']
}
}
In tsconfig.json turn off the compileOnSave option to signal to IDEs not to generate all files for a given configuration upon saving:
{
"compileOnSave": false
}
Not all IDEs currently obey the option. See https://www.typescriptlang.org/docs/handbook/tsconfig-json.html for more detail.
It seams that your IDE is compiling your TS files.
It happens with me once with webstorm,
Witch IDE are you using?
Try to disable typescript compiler.
In case you are using webstorm:
Ctrl+Alt+S
Search for typescript under Languages & Frameworks
uncheck "Enable TypeScript Compiler" checkbox