in my backend I am using Multer to save images in my server. They are saved in my images folder:
With react, I try to recover these images. I have the URL of the image in my props (mediaURL is http://localhost:4200/images/1635506218497.png) and so I do a src={mediaURL} but it does not display the image to me, only the alt attribute.
So I try to hand write the absolute path to the image or the relative path, but I have an error: "Module not found: You attempted to import ../../../../ ../../back-end/images/1635506218497.png which falls outside of the project src / directory. Relative imports outside of src / are not supported. "
Same thing if I try to import the image via a module.
This is my front :
How do I display my image?
I don't know if it's related but when I type http: // localhost: 4200 / images / 1635506218497.png in my browser, I have a "Cannot GET /images/1635506218497.png" but my backend is running on port 4200.
Well, i just forgotten to use static middleware in my app.js.
app.use('/images', express.static(path.join(__dirname, 'images')));
Now its work
Related
I am serving a dist folder from a vue app (created with create-vue-app). However, it serves well when I am not pointing to some specific route, just use the root route without anything. However, if I specify a sub-route, e.g like '/static' , the it does not serve the vue app dist index.html... I get the message in browser:
Refused to apply style from 'http://localhost:3000/css/app.fc1b515e.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
4localhost/:1 GET http://localhost:3000/js/app.6869d12b.js net::ERR_ABORTED 404 (Not Found)
however, it finds the favicon.ico if I enter it to the path in browser...
sometimes, I also get the error message that tells me javascript is not enabled (which is wrong)...
This is how I set up my routes:
app.use('/static',express.static(path.join(__dirname, '\\client\\dist')));
Your Vue app is referencing assets relative to /, like this:
/css/app.fc1b515e.css
/js/app.6869d12b.js
...but you are serving the assets at /static:
/static/css/app.fc1b515e.css
/static/js/app.6869d12b.js
You can set the publicPath configuration option to /static/ in vue.config.js to ensure that your Vue app references the static assets correctly.
Docs:
https://cli.vuejs.org/config/#publicpath
Hope this helps.
Should I be loading photos in node by importing relative paths or by referencing the file URL, and how do you properly load photos from their relative path?
Currently I'm serving static files with express:
server.use(express.static(__dirname + '/../public'));
And loading photos by referencing file URLs:
<img src='/images/tom.jpg'/>
I have a webpack configuration set up to use file-loader on (png|jpg|gif), and the webpack docs say, that with file-loader, you can import photos from relative paths (https://webpack.js.org/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx):
import img from './file.png'
With this configuration (this is the config I'm using):
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
However, when I try to import an image from it's relative path:
//import
import img from '../../public/images/tom.jpg';
//render
<img src={img}/>
I receive this error:
/Users/ryan/Desktop/Df/Coding/ryanchacon.io/node_modules/babel-core/lib/transformation/file/index.js:590
throw err;
^
SyntaxError:
/Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg:
Unexpected character '�' (1:0)
1 | ����
But if I emit the 'import from relative path', start my server, and then add the relative import back, the image will load from its relative path. However, if I restart my server, the error throws again.
So instead I'm referencing the file URL to get around this error, but I'm not sure how I should properly load files from their relative path with my webpack/node configuration.
Currently, I'm running node v8.6.0, webpack v3.6.0, express v4.15.4, file-loader v1.1.5, and react v16.0.0.
In your server.js file, you're using server side rendering (which is awesome): ReactDOMServer.renderToString( <App /> ). The App component rendered on the server side is imported via the import App from './src/App'; statement. In the App.js file you have the JPG import statement: import img from '../public/hermes.jpg';.
Please notice that in this context, your node.js is not aware of any webpack bundle in your project, and node actually tries to import the '../public/hermes.jpg' file, which causes the error you're facing (node can only load JS modules).
So the question is, in fact, how to use file-loader in a universal/isomorphic manner. You can take a look at this example project: https://github.com/webpack/react-webpack-server-side-example that shows a webpack configuration for both the server and the client code. Theoretically, if you bundle your server code via webpack, when you run it, the JPG import statement would already be processed by the file loader and should not cause any problem. I have to admit that personally I do not think bundling server code is a good idea (bundling solves client side issues that are not really relevant on the server side).
If you insist using file-loader and bundling your image files into your client code, using server side webpack might be a good solution for you. If not, you can simply load the images from the /public folder.
For what it's worth, I believe that loading the images by using URLs is not only simpler, but also faster - the browser will download your lighter JS bundle (it's lighter because it does not contain encoded image files) and your code will start running earlier on, downloading the images from HTTP in a parallel, asynchronous manner.
I am using express with webpack-dev-middleware and webpack-hot-middleware in my development environment. I build a storage/DFS module that works in a similar way as GitHub. You paste a URL and it opens up a folder or a file. The problem now that I have is, when I paste a URL that contains a file extension at the end as in (/storage/folder1/folder2/file.py) I get 'Cannot GET /storage/folder1/folder2/file.py'.
It is a VUE app and for routing I am using vue-router. The path configured in VUE app is:
path: 'storage/*'
Using as a template for VUE app: https://admin.vuebulma.com/#/
Any suggestions on how fix this?
I have a code line:
app.use(express.static('public'));
for static files in public folder, but build a route:
app.get('/search/jobs', jobs.index);
The Expressjs is putting /search before url.
And I'm a getting error in console browser:
GET: http://localhost:5000/search/css/materialize.css
Any idea?
You need to use absolute paths in your html/css (e.g. /css/materialize.css). With relative paths (e.g. css/materialize.css) the browser will look up the path relative to the current path/"directory" (/search in this case).
I have build an application with NodeJs + ExpressJs.
I have file jquery in folder js of public, ex:
http://192.168.2.129:7878/javascripts/jquery.min.js
But how can I config setting Express to get this file jquery when i get this url
http://192.168.2.129:7878/1111/javascripts/jquery.min.js
From documentation, to add relative 'virtual' path you write following code:
app.use('/1111', express.static('public'));