I have tried to search for an answer here but nothing so far worked, not many threads about handlebars. Im at my 2nd year of coding and struggling to get images to show up on my node app.
I have this on app.js and below that the code im trying to get image to show up on the .hbs file:
app.use(express.static('img/'));
<img src="bckground.jpg" alt="teeest" />
Thank you in advance if someone knows what to do.
Supposing that you are serving your application at "http://localhost:3000", and your web page is "http://localhost:3000/index.html", you are requesting the image "bckground.jpg", so the browser will try to load "http://localhost:3000/bckground.jpg". This is wrong, because you are serving the static images folder under the "img" path, so the image is available at "http://localhost:3000/img/bckground.jpg".
If your application is being served at the "root" path of the domain, then this should work for you:
<img src="/img/bckground.jpg" />
Note the initial "/" at the image path. This means that the path will be calculated from the root folder of the domain. You should take this into account if you are serving your application in a subfolder.
Related
I am building a React application which needs to display images dynamically which are stored, by the thousands, on a server-side file system. All of my attempts to successfully implement this have failed, including many which were taken from responses to similar questions.
Some details:
I used create-react-app to initialize my application. I am running in development mode (have not run npm-build). I'm using Express.js (Node.js) as a web-server, which I interact with through a proxy (only '/api' http requests use the proxy). My js code which attempts to 'require' the images is in the 'src' folder. The images are located in an 'images' folder in the default 'public' folder.
I thought I had found the solution when reading this page from create-react-app, as it states to use the public folder when 'You have thousands of images and need to dynamically reference their paths'. The page further instructs to use '%PUBLIC_URL%' or 'process.env.PUBLIC_URL' to access the 'public' folder. When using either of these I receive an 'Error: Cannot find module' message. Upon checking I notice that 'process.env.PUBLIC_URL' contains an empty string, and quickly notice that PUBLIC_URL is ignored in development mode.
I find this to be tremendously confusing, given that the 'Using the Public Folder' page is apparently describing the development phase of production, and yet it advises the use of something which is meaningless during development. Adding to my confusion, it appears as if the contents of that page resolved the issue for nearly all of those who have encountered a similar requirement in the past (example: 1, example: 2; both fail for me). Likewise, all attempts to to construct relative paths to the 'public' folder from the 'src' folder have yielded error messages. Failed code example:
let img = process.env.PUBLIC_URL + '/images/Team.jpg';
<img src={require(`${img}`)} alt="X" />
Error: Cannot find module '/images/Team.jpg'
I never imagined showing images in React would be so difficult. Any help is truly very much appreciated.
I think you are correct, you just don't need the require, return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; as you can see their docs
If you open in your browser http://localhost:PORT/images/Team.jpg that should open.
That's the reason process.env.PUBLIC_URL is empty in development, because they resolve everything inside this folder directly.
I am setting up a Node.JS application using express, and I want domain.tld/hey to serve the public/index/index.html folder on the server (also containing other files such as .css or .js files).
However, I DO NOT want domain.tld/hey/ to work (the / at the end is a problem for me) and in this case, I want to display a custom error page located at public/error/index.html on the server.
Finally, when accessing domain.tld or domain.tld/, I want to display a custom homepage located at public/home/index.html on the server.
To summerize:
domain.tld or domain.tld/ serves public/home/index.html
domain.tld/something serves public/index/index.html
domain.tld/something/ or domain.tld/some/thing serves public/error/index.html
I already tried using express.static('folder', { redirect: false }) but it doesn't display the index.html file and I can't get the other things to work.
I really don't know how to do it!
I fortunately don't have any code to show you guys as this is more a theorical problem, since I am beggining with expressjs.
Thank you very much in advance for your answers, and please don't hesistate to ask for more details if you need some!
I'm building a nodejs + angular application. On the server-side I have a function that uploads a new image to my angular folder under assets/images/uploads, it also saves the path of where i have uploaded it to a database.
In my angular I want to be able to show that image right after I have uploaded it. I'm trying to do this by saying:
<img mat-card-image src="../../{{users.profilePicture}}" alt="Test">
my users.profilePicture contains the correct path to where my image is stored. This doesn't work because the path is not found. However, if i restart my angular application with "ng serve" the picture will be found and displayed as desired.
I've drawn the conclusion that this must be because the assets of my application are loaded once the application starts, and cannot detect that new ones have been added while the server is already running. Is there any way to bypass this, so that I can get my angular to reload my assets folder and detect that there has been added a new picture to the folder, while the application is already running?
Ng serve loads your app in memory, so newly added items won't include in your compiled app.
You can find some solutions in this SO post:
Serve assets as they are dynamically added
I am having trouble displaying an image which is in my angular folder app.
here is my folder structure:
I am accessing it from the contact.component folder; I have tried accessing directly like src="../images/DNS.jpg" and relatively to the index.html file src="./app/images/DNS.jpg" and it doesn't work.
How can I reference this?
Put all your images in assets folder and Try this :
<img src="assets/DNS.jpg" />
As, angular recommends to put all your resources in the assets folder including images/fonts etc and access from there.
1.When pointing the URL as "http:/servername/virtualdirectory" and for example i am setting image path as ../Content/Images/xx.png using jquery in js file then the images is not loaded
2.When pointing the URL as "http:/servername/virtualdirectory/controllername/action" and for example i am setting image path as ../Content/Images/xx.png using jQuery in js file then the Images is loaded.
Questions is why the image is not loaded during IIS request from routeconfig.cs ie 'http:/servername/virtualdirectory' in MVC5
Try using <img src="~/Content/Images/xx.png"> in your Razor syntax. This will generate a correct path to your image.