I'm trying to make an image appear on multiple pages using Pug and Express.
But I've been running into some trouble.
The image should be rendered on the page on the routes '/', 'data', 'update'. It is successfully rendered on the root '/', but afterwards, disappears from the Sources folder.
In app.js I have this middleware about all my route-handlers:
app.use(express.static(path.join(__dirname, '/public')));
In the public folder I also have the file styles.css which renders fine on the other pages.
I fixed it by putting
img(src="/image.jpg")
instead of
img(src="image.jpg)
Anybody know why that is?
Lets imagine you got the following url on your page (that loads an image or whatever):
<img src="image.jpg" />
Now if that template is on the main page, e.g. http://example.com/, it will point to http://example.com/image.jpg which will hit the express static route and everything is fine. Now you visit http://example.com/something, and as tze image url us relative, it will point to http://example.com/something/image.jpg. And that file does not exist. Now if you change the image to:
<img src="/image.jpg" />
It will be relative to the pages root (http://example.com) and therefore it will always work.
Related
I have my website on the subdirectory /test and it only works when I go directly to that path from www.domain.com/test. If I go to domain.com/test, it redirects to domain.com/test/index.html and displays my error page. I am confused if this is an error within React routing or my .htaccess.
I have a vue-cli 3 project setup with the following directory structure:
All static assets are loaded in the public directory and are compiled and built successfully on localhost.
As seen in the image below, guyana-live-logo.png, slide-1.jpg and 970x250-ad.png are all loaded successfully, however, only the logo and the ad image appears in the browser.
What I've tried
Changing the way the image is referenced.
Original - which works for almost all other images
<img src="/img/slide-1.jpg"/>
Test 0 - this loaded the image with a hash appended (slide-1.1b0ahsa.jpg) but it still did not appear in the browser
<img src="../../../public/img/slides/slide-1.jpg">
Test 1 - using v-bind
<img :src="'/img/slide-1.jpg'"/>
Moving the image inside the src directory and the component sub-directory both of which proved futile.
Updating vue-loader
Building for production and serving only the /dist folder
Key notes
The console or my bug tracking software produces no error.
Image format doesn't seem to be the problem, some .png loads while others don't, the same is true for .jpg.
Some JavaScript files are affected. JS files are being called like this: <script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script> in public/index.html
The images will need to be in the same directory or a child directory of the file in which you're trying to access them (i.e. in the Components directory).
Can you also try to access the image via its URL <img src="http://localhost:8080/img/guyana-live-logo.png" />?
This should work, but you may not want to use it this way.
Another possibility you might be able to use is doing this:
<script>
import image from './img/slide-1.jpg'
...
Then in Vue data:
data() {
return {
img: image,
};
},
Then in your HTML:
<img :src="image"/>
This solves issues when trying to access images when building with Parcel Bundler
I'm currently trying to set up a password reset flow using Pug (formerly known as Jade) and Express.
For some reason GET requests including URL's with multiple paths appended will render my pug views files with text only. No images or style is loaded.
For example:
app.get('/example', (req, res) => {
res.render('test')
})
will render the test file with style and images perfectly. However:
app.get('/example/test', (req, res) => {
res.render('test')
})
will render the test file with text only. Images and style missing.
Any ideas as to what may be causing this issue?
add app.use(express.static(__dirname+"/public")); in your server.js.
create a new folder called public on your workspace where your server.js exists.
Now create styles and images folders inside public and put your css files and images files inside each folder.
change your path of css on test.html to /styles/test.css for example. You should have it work now.
The static method defined in express will look for publicfolder as the absolute root path and now no matter how many layers of route calls you get you can access to your styles and images folders without the need to back trace the relative path of your css/images files.
Can I tell gulp-connect to use a specific base URL that does not relate to the folder structure it is serving from?
I am trying to serve the app directly from the src folder and therefor set gulp-connect's root to 'src'. The src folder contains the index.html.
When I browse to "localhost:< port >". It shows the index.html, but because of internal use of a JavaScriptvariable set to the production base URL, the internal routing and script loading does not work. That's why I want to tell gulp-connect, to behave as If the production base URL would be left out.
For example: Browsing to 'localhost:8080/MyApp/index.html' should basically do the same as browsing to 'localhost:8080/index.html'.
I have an Ember-cli 1.13 app that has a lot of images stored in the public directory. Now, it will correctly load all images except those in a particular component.
The component is called like this:
{{list-item url="list-url" name="List Name" price="240"}}
Internally, the component is this:
<a href="http://example.com/{{url}}">
<img src="/{{url}}.png" alt='Picture of the {{name}}' />
<p class="item-name">{{name}}</p>
...
</a>
When I build the application and launch to heroku the broken path is
https://ridiculous-name-123123.herokuapp.com/list-item.png
Which is the same as the localhost path except with a different domain obviously.
All of the other images work when not used with components.
Where am I going wrong?
When you build with a production env your assets undergo something called fingerprinting.
What appears to be the problem here is that your "built" url links to the un-fingerprinted file, one solution would be to move these images into a folder and exclude them from being fingerprinted, in your ember-cli-build.js:
var app = new EmberApp({
fingerprint: {
exclude: ['myComponentImages/']
}
});
A better solution would be to have the full url or pass a class that changes the image displayed since it looks like these are static assets and not user uploaded content.