Next JS v13 Getting Image from the server Error - javascript

I am trying to get the image from the server but I always encounter this error that next js cannot read the url so it can display the image inside the page , i tried many solutions in next.config.js file but it doesn't work here is the solution i did but it doesn't work
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'localhost',
port: '1337',
pathname: 'localhost:1337/',
},
],
},
here is the error in the browser :
Error: Invalid src prop (http://localhost:1337/images/aa.png) on
next/image, hostname "localhost" is not configured under images in
your next.config.js See more info:
https://nextjs.org/docs/messages/next-image-unconfigured-host
here is my code inside next js page.js :
<Image src={(process.env.SERVER + cat.img).replaceAll(/\\/g, "/")} width={"200"} height={"200"}/>
the env server is just the url of localhost:1337/ inside the next.config.js file , how can i render the image from my server and display it on the screen ?

your remote pattern defines an 'https' host, but you are loading the image using src prop with 'http'. I would suggest updating to use the 'http' protocol:
images: {
remotePatterns: [
{
protocol: 'http',
hostname: 'localhost',
port: '1337',
pathname: 'localhost:1337/',
},
],
},

Related

VS Code showing 401 trying to load script and CSS assets in a Webview

Summary
I'm trying to load an HTML page referencing local JS and CSS files into a Webview. Details below on the code I'm using to construct the URIs (the results don't look correct, but the code I believe matches other examples online). The Webview Developer Tools show 401 errors for the assets. How can I get these loaded?
Details
I'm producing HTML with this in the <head>. (I have both logged this HTML as well as viewed the source elements through the Webview Developer tools to verify.)
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'self' https://*.vscode-cdn.net; script-src 'nonce-1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3'">
<link href="https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/baseeditorstyles.css"
rel="stylesheet">
<script nonce="1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3" type='module'
src="https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/editorglue.js"></script>
The URIs are being produced by this code:
private resourceURI(file: string) {
return vscode.Uri.joinPath(this.extensionURI, 'resources', file);
}
private webviewURI(file: string) {
return this.panel.webview.asWebviewUri(this.resourceURI(file)).toString();
}
// …
const editorCSSURI = this.webviewURI('baseeditorstyles.css');
… where extensionURI is from context.extensionUri with contents: {scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor', query: '', fragment: '', …}. That path is correct.
As best I can tell, that's the same effective code path as shown in this VS Code example for generating the webview URI.
The result, however, is that every CSS and JS asset shows net::ERR_ABORTED 401 in the Webview Developer Tools.
GET https://file+.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/baseeditorstyles.css net::ERR_ABORTED 401
(anonymous) # index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&swVersion=4&extensionId=undefined_publisher.visual-scxml-editor&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:973
setTimeout (async)
onFrameLoaded # index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&swVersion=4&extensionId=undefined_publisher.visual-scxml-editor&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:971
(anonymous) # index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&swVersion=4&extensionId=undefined_publisher.visual-scxml-editor&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app:1002
Any thoughts as to what I'm doing wrong?
Investigation
#Andrew below suggests that asWebviewUri() should be returning a URI with a scheme of vscode-resource. Modifying my webviewURI() function to output debug information:
console.log({
file,
fileURI:this.resourceURI(file),
webURI:this.panel.webview.asWebviewUri(this.resourceURI(file))
})
…shows that it is in fact generating URIs with an https schema and an authority of file+.vscode-resource.vscode-cdn.net:
{file: 'neatxml.js', fileURI: f, webURI: f}
file: 'neatxml.js'
fileURI: f {scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js', query: '', fragment: '', …}
_formatted: null
_fsPath: null
authority: ''
fragment: ''
fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js'
query: ''
scheme: 'file'
webURI: f {scheme: 'https', authority: 'file+.vscode-resource.vscode-cdn.net', path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js', query: '', fragment: '', …}
_formatted: null
_fsPath: null
authority: 'file+.vscode-resource.vscode-cdn.net'
fragment: ''
fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js'
query: ''
scheme: 'https'
While in the past it may have been that asWebviewUri() generated URIs with a vscode-resource: scheme, that is no longer true. The CORS policy generated by this.panel.webview.cspSource is properly aligned with the URIs it generates to work.
What is missing is that when vscode.window.createWebviewPanel() is called one must pass along localResourceRoots listing the location(s) where files may be loaded from. For example:
const resourcesDirectory = vscode.Uri.joinPath(context.extensionUri, 'resources')
const panel = vscode.window.createWebviewPanel(
'scxml', `SCXML ${path.basename(doc.fileName)}`,
vscode.ViewColumn.Beside,
{
enableScripts: true,
localResourceRoots: [resourcesDirectory]
}
);
I actually had both enableScripts and localResourceRoots set, but due to a copy/paste error I was setting the directory to 'media' instead of my actual 'resources' directory.

javascript jira-client package: how to specify a port when setting the host

The jira-client works fine when not specifying a port, but I need to get to a Jira instance that uses a port. Anyone know how to do this? Maybe an env variable?
const JiraApi = require('jira-client');
const jira = new JiraApi({
protocol: 'https',
host: 'greenhopper.app.company.com:8080',
...
});
Unfortunately, the library reports the error:
cause: Error: getaddrinfo ENOTFOUND greenhopper.app.company.com:8080
You can set the port when creating the Jira client
jira = new JiraApi({
protocol: 'https',
host: config.host,
port: config.port, // Here
apiVersion: 'latest',
strictSSL: true,
oauth: oauthConfig
});
Here are all the options from the code-jira-client docs

Rewriting Webpack Proxy URLs

I'm using Webpack Dev Server to proxy my files from an external url, that's because I'm using it to develop locally and proxying the PHP/Twig files from the server, so that way I don't need to set up all the back-end locally.
But the problem is that I need to rewrite the assets urls to pull these files from my local machine, not from the proxy. Right now, when I open my localhost, all the assets are being loaded from the server. i.e: http://mycoolwebsite.com/core/somefolder/assets/styles.css
And I need to replace that to pull from my localhost, like this:
/assets/styles.css
This is what I have now:
devServer: {
compress: true,
port: 9000,
proxy: {
'*': {
target: 'http://mycoolwebsite.com',
changeOrigin: true,
secure: false
}
}
Any clue?
Thanks!
you want all request that go to your server "http://mycoolwebsite.com/**"
to go to your local machine: "http://localhost:9000/" (assuming its running on port 9000)
so try this:
proxy: {
'/assets/**': {
target: 'http://localhost:9000',
secure: false,
pathRewrite: function(req, path) {
//use the pathRewrite to modify your path if needed
return path;
}
}
now it shouldn't make any difference what server you are actually calling. every request that includes '/assets/' should go to your localhost. (I can not test it atm)

Electron Builder: Not allowed to load local resource: app.asar/build/index.html

I have an issue when using electron builder I got blank page and error in console:
Not allowed to load local resource: file:///C:/Users/emretekince/Desktop/DCSLogBook/client/dist/win-unpacked/resources/app.asar/build/index.html
main.js
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '/build/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl);
Solved by adding "files" in package.json
"files": [
"*.js",
"build",
"node_modules"
],
I think your index.html file is not present in your given location. __dirname, '/build/index.html'
I missed this silly point and wasted a lot of time. Angular-cli creates default location for index.html inside a folder in dist.
dist/project-name/index.html
I got a similar problem and was missing the path.join:
Bad Code:
win.loadFile('index.html')
Fixed Code:
win.loadFile(path.join(__dirname, 'index.html'))
I had the same issue and managed to sort it out using:
path.resolve('index.html')
like this:
const startUrl = path.resolve('index.html');
mainWindow.loadURL(startUrl);
I tried to fix this my whole day & finally found the solution,
"build": {
"appId": "myledgerapp",
"extends": null,
"files": [
"./build/**/*",
"./public/electron.js"
]}
We need to add files in build section where electron.js is my entry point.
I also got the same issue i placed the below line before loading the file.
window.webContents.openDevTools()
Example Code
// Issue code
window = new BrowserWindow({width:800,height:600,parent:mainWindow})
window.webContents.openDevTools()
window.loadURL(url.format({
pathname: path.join(__dirname,'/../views/file.html'),
protocol: 'file',
slashes: true
}))
// Issue Solved code
window = new BrowserWindow({width:800,height:600,parent:mainWindow})
window.loadURL(url.format({
pathname: path.join(__dirname,'/../views/file.html'),
protocol: 'file',
slashes: true
}))
window.webContents.openDevTools()

restangular remove and put error net::ERR_NAME_NOT_RESOLVED

i have this error when i try to do a put or a remove with restangular the post and the getList() works perfectly,
when i'm going to edit mi object i create a object like this
edited = Restangular.copy(danger);
danger is my modelobject from my template in a table i just grab the object from the table, the object is fine.
then in my function i just try to do
edited.put();
and the error is OPTIONS http://dangers/1/ net::ERR_NAME_NOT_RESOLVED
like restangular is not generating the url, the post url is http://localhost:8000/dangers/
i'm using gulp with a proxy in the dev enviroment to capture the api requests
gulp.task('server', ['build'], function() {
gulp.src('./build')
.pipe($.webserver({
port: 8080,
host: 'localhost',
fallback: 'index.html',
livereload: {
enable: true,
port: 8181
},
open: true,
// django app
proxies: [{
source: '/api',
target: 'http://localhost:8000/api'
}]
}));
});
This was my error django restframework needs the trailing slash in every url the solution was to add in the config of restangular
RestangularProvider.setRequestSuffix('/');

Categories