I have a VueJS project (customized from a base "webpack-simple" template provided by vue-cli) with the following folder structure
I am developing the "clickableimage.vue" component and am having trouble referencing assets like images. Code for the component is given below.
<template>
<div id="clickableimagecomponent">
<img :src="imageURL" ></img>
<p>Hello There....</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
imageURL:"./dist/loading.gif",
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
I have setup webpack to take build the "clickableimage.js" file and drop it into the "dist" folder.
The problem I am facing is that in the component, when I am using src (without any vue bindings) for the img tag as "./assets/loading.gif" it works.
However, the above code also works, when there is no "loading.gif" file in the dist folder. Debugging the JS in FF shows the following.
Clearly the file is being loaded from dist/loading.gif, however, no such file exists in the folder.
Am i missing something here? I am unable to trace how the browser is able to load the file. Is VueJS doing any behind the scenes magic??
P.S : Just to be sure, I have opened the URL in an incognito window in FF, just in case the browser might be showing a cached version, but it works there too.
My webpack config is as follows..
I'm only brainstorming here... I think it has to do with the Hot Module Reloading not being perfect. If you had it as "./assets/loading.gif" then that would match test: /\.(png|jpg|gif|svg)$/, and that should produce a base64 encoded image that gets embedded in the script that it bundles (and not placed in the dist folder). Now perhaps what happened when you changed it to "./dist/loading.gif", is that it still searched for loading.gif in the script which in the dev environment might still be available since you initially ran the dev server with "./assets/loading.gif". I'm no expert, but I think the img-loader in your webpack config is taking your "./dist/loading.gif" and intelligently finding the image in one of the webpack chunks that was initially built. If you were to start the dev server with "./dist/loading.gif", my guess is it would not work as you initially expected it too.
Related
I have created a web component, uploaded it to npm, and imported it into another project.
I use webpack to bundle all of the code used within the web component, which creates a bundle file (in my case index.js).
This is the structure of my dist folder:
/dist
/static
/images
/fonts
index.js
Everything works, except loading images or fonts (static files). How can this issue be overcome? I have just added the static files to a public github repo at the moment, and load them from there. But I do not think this is the right way to do it.
I guess if the images are not that large, they can be converted into base64 and just bundled with the rest of the code?
Any thoughts
Found a similar question Paths in Web Components are Relative to Root.
The webcomponent specification defines that URLs are always relative
to the main document. This, of course, breaks web component
encapsulation, as you rightly concluded. In other words, the
specification is buggy, and lots of people are complaining about it.
I want to dockerize my vue app, but when I run it in a docker container nothing is loaded in the browser.
Since I run CMD["http-server", "dist"] in my Dockerfile, I decided to test it out locally to troubleshoot the issue.
Running:
npm run serve
Works fine and I get:
Then I run
npm run build
I believe this is due to having a posters folder with 50,000+ jpeg images in the assets directory which I dynamically display in the app as follows:
<div v-for="movie in this.recommendations" :key="movie" class="movie-card col-md-2">
<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:alt="pic">
And the getImgUrl function is:
getImgUrl(imgName) {
var images = require.context('../assets/posters', false, /\.jpg$/)
return images('./' + imgName + ".jpg")
}
vue/cli suggests
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
but I'm not sure how to implement either one of these or
if hosting the images on a public google drive and importing them from there would solve the issue?
Pretty new to vue so any help would be much appreciated!
By using the assets folder and using require you are bundling all of your images into your code, by encoding them as base64. So when it is compiled it is creating GIANT chunks. Because the images are compiled into the source.
What you should do is move your images from assets to the public directory. Then load the images via HTTP. This means that your code and images remain separate. When the page loads, the browser requests the images separately from your code, and loads them into the file.
For example
<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:alt="pic">
getImgUrl(imgName) {
return `/posters/${imgName}.jpg`
}
Thus your directory structure would become
-public
-|--posters
-|--|--Poster1.jpg
-|--|--Poster2.jpg
-|--|--Poster3.jpg
-|--|--Poster4.jpg
etc
The public directory overly simplified acts as a webserver. Anything that is in it can be accessed directly. For example, if you were to move your images over, to the public directory, with the directory structure above, and access localhost:8080/posters/Poster1.jpg, it would load just the image, without even needing a Vue router.
For a better, in-depth description of the public folder, and the role it serves check out the docs.
I've finished making an app with HTML, CSS, and JS files, all of which I've stored in the 'assets' folder of Android Studio.
The app runs without crashing, but only this screen appears:
Empty app screen.
I've tried implementing each of the following file paths:
webView.loadUrl("file:///assets/menu.html");
webView.loadUrl("menu.html");
Neither of them work.
I've read that it's ideal to create a new folder in 'main' and call it 'android_assets' and then name the file path ("file:///android_assets/menu.html"); but I don't want to inadvertently create more problems in my code.
Should I create the 'android_assets' folder? Is there anything I'd risk in doing so?
Try this:
1.
Ensure your assets path is: assets/foldersIfAny/index.html
2.
Then use this:
webView.loadUrl("file:///android_asset/foldersIfAny/index.html");
Attempting to wrap my head around Ember.js.
Seems I understand the complex things, but miss out on the little things.
How would one go about adding an example.js file?
For simplicity, let's say the example.js file only contains:
(function(){
console.log("example is alive in console");
})(window);
This should display "example is alive in console" within the browser console.
I have tried:
adding app.import('vendor/javascripts/example.js'); within ember-cli-build.js and adding <script src="{{rootURL}}vendor/javascripts/example.js"></script> to index.html
Console is showing
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
DEBUG: -------------------------------
DEBUG: Ember : 2.11.3
DEBUG: Ember Data : 2.12.1
DEBUG: jQuery : 3.2.1
DEBUG: -------------------------------
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
All of the answers I have found stated that just adding custom.js to vendor file works. Sadly, I am missing something.
When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.
This works for me when I don't nest assets in the /vendor directory. The ember-cli build process bundles JS files in /vendor into a single vendor.js file, which you can see linked in app/index.html. So place your example.js file at the root of /vendor, and then add the import to ember-cli-build.js:
app.import('vendor/example.js`);
Now when you start the server, your code from example.js should execute, since it will be included in assets/vendor.js.
Firstly, Ember.js has Convention Over Configuration approach, and your URL can do a lot of things than a normal HTML website.
Whatever you may want to do with your custom.js file it is not ember way of having it as a path. You need routes for navigation across the app. Although routes do much more than navigation. You specify the structure of your app that a user can browse through using Router's map function in app/router.js file.
However if you want to include custome.js file in your app, and have custom.js do some set of tasks for your app. You can simply go ahead and create a directory with any name, javascript for instance inside app directory. Have your javascript files placed inside it. Then you can import these files as simply as referencing any other files in ember:
import customObject from 'yourApp/javascript/custom.js';
Here, your custom.js should be exporting customObject.
Do read the guides if you want to learn more. And the API docs if you actually want to learn more.
Note: At the time of writing this answer current ember-cli version is #2.12.0
As the problem is short & sweet, I'll keep the question so.
CAN'T LOAD ASSETS.
Using Sails.js (v0.11.n).
Can't load assets... That's about it...
I'm trying to load sails.io.js -- or now even just assets/alert.js.
<script type="text/javascript" src="/js/dependencies/sails.io.js"></script> Doesn't work :(
Even when I switch the src to /alert.js -- nothing.
I'm pasting this script tag inside of my /signup view -- which loads fine -- but I know sure as heck I'm doing something(s) wrong.
This was due to an issue with the sails new app generator that has been fixed. The issue was that for any new app, the Grunt hook would be disabled, so that your assets would not be copied automatically into your app's .tmp/public folder at lift time. This is only supposed to happen if the --no-front-end option is used with sails new, but it was happening all the time. You can check for this problem by looking in your app's .sailsrc file; if you see:
"hooks": {
"grunt": false
}
remove it, and your assets will be accessible again.
Grunt is taking care of the asset pipeline for you. If you look in the source for layout.ejs, you'll find some tags for your assets. Grunt is automatically looking into the assets folder, and is including them into your layout.