where do you copy the image in order for the following commands to work?
<b-img :src="require('../static/picture.jpg')" />
<b-card-img :img-src="require('../static/picture.jpg')" />
I got the following code from the vue bootstrap website Vue Bootstrap
I wanted to try this out instead of making a lot of changes to the transformToRequire option.
partial directory layout for a vue project:
myProject | src | components (.vue files located in components directory)
Path are relative to the file where you write your require.
So lets says the your script is in ./src/components/myComp.vue your file would be lookup in ./src/static/picture.jpg
The purpose of transformToRequire is not to manage asset location although it might issue error if path is not set properly. transformToRequire is only a syntactic sugar from src="..." to src="require(...)" and let webpack do the rest.
There is also an alternative if you don't want to border where your file is, especially when your are moving file around.
In webpack you set an alias for some path typically:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
},
So that you can use:
<b-img :src="require(#/static/picture.jpg)" />
Based on the structure you gave, you would have a static folder in src where you put your images.
But do note that require is relative to the currently file.
Related
so I seem to be a bit confused on how to work with images in webpack encore + assets.
I store all JS & CSS like this
/assets/js
/assets/css
...
With encore I can access them later from my /public/build folder - no issues there.
Now I want to store some images (e.g. file upload).
First idea was to store them inside a folder like /assets/images. But with the current settings & using assets I can only access files inside /public/build folder.
So I tried to use to copyFiles to copy everything from /assets/images to /public/build/images.
But this does not automatically copy my files (e.g. file upload to /assets/images/ does not copy it to /public/build - which is in order not accessible in my project). So I would need to run manually encore - which I don't want.
Second idea was to store the uploaded images directly inside /public/build/images but those files would be deleted when I run encore.
Next I disabled the webpack option cleanupOutputBeforeBuild, so images would not be deleted. But without this option the folder will be flooded by new JS & CSS Files everytime I run encore.
What do I need?
A solution to store my images either way in /assets folder & make them available for my project.
or
store the images directly in /public/build folder without encore deleting them nor flooding the folder with JS/CSS by disabling cleanupOutput Option.
Thanks in advance ~Syllz
If u need to use it in JS, just require the file:
// assets/app.js
import logoPath from '../images/logo.png';
let html = `<img src="${logoPath}" alt="ACME logo">`;
When you require an image file, Webpack copies it into your output directory and returns the final, public path to that file.
If u need using it from a templates:
You need to install file-loader to use copyFiles()
yarn add file-loader#^6.0.0 --dev
then enable it in webpack.config.js:
.copyFiles({
from: './assets/images',
//optional target path, relative to the output dir
//to: 'images/[path][name].[ext]',
//if versioning is enabled, add the file hash too
to: 'images/[path][name].[hash:8].[ext]',
//only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
then use it in your twig template:
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">
more details in Symfony documentation
You can use the CopyWebpackPlugin to do this. You can read this post for more details.
Solution to my problem:
Store the images into /public/images and not into the build folder - which will be deleted when running encore.
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
I try to add a simple vue component for using it in .md file as explain in the vuepress documentation. I placed my HelloWord.vue in the .vuepress/components folder and then in my markdown file i call it with but nothing show up after running vuepress dev, does anyone had this problem before ?
How are you writing the component in your .md file?
For a component called HelloWorld.vue in .vuepress/components, you need to use:
<HelloWorld /> or <hello-world />
if it's in a subfolder inside components, you need to prepend that to your component name and I believe you then have to ensure you use the same format as the components file name.
So for a HelloWorld.vue component stored in ./vuepress/components/example/, you would use:
<example-HelloWorld />
Vuejs seems to follow this rule :
kebab-case such as <hello-world /> is accepted by default in HTML files (md files too since they will be rendered as HTML).
However, if you specify the name of the component in your .vue file, as follows :
<script>
export default {
name : 'PreviewPage'
}
</script>
Then, both <HelloWorld /> and <hello-world /> will be recognized.
In my html page I am referencing static assets like:
<script src="/static/assets/js/bundle.js"></script>
and
<link rel="stylesheet" href="/static/assets/css/style.css">
These files are stored in:
/assets/js/bundle.js
/assets/css/style.css
Currently my route looks like this:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/assets"))))
Currently it is not working and returning a 404 not found error when I look at chrome console.
What am I doing wrong here?
The problem is with your call to http.Dir("/assets") in this line:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/assets"))))
http.Dir takes the path to the folder either in absolute form or relative to where the go executable is. Using "/assets" tells it that the absolute path to the assets folder is on the root of the file system, where in reality I'm guessing the assets folder is in something like /home/YOUR_USER_FOLDER/code/this_project/assets.
Just change the code to use the absolute path:
app.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir("/home/YOUR_USER_FOLDER/code/this_project/assets"))))
If the assets folder is in the same location as the go executable, you can just use "assets" as the file path, but I will recommend using the absolute path to avoid any confusion.
I am struggling with webpack. I want to have the compiled files in public-cdn folder. However, the following code creates files in several different locations. Including E:\cdn. Chunks, app.js, css files - everything in different location.
Paths:
main folder: www/Project
laravel public: www/Project/public
cdn folder: www/Project/public-cdn
webpack.mix.js
mix.webpackConfig({
output : {
path : '/public-cdn/',
publicPath : 'http://cdn.ywg.localhost/',
chunkFilename : 'js/[name].js'
},
});
mix.sass('resources/assets/sass/styles.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.sass('resources/assets/sass/invoice.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.js('resources/assets/js/frontApps.js', '../public-cdn/js')
.extract(['vue']);
I tried experimenting with Path and PublicPath parameters. PublicPath doesn't seem to work at all.
After some more experimenting, I think I found a solution. The issue might be caused by laravel mix which set's the "public" folder.
I added:
mix.setPublicPath('public-cdn/');
and it seems to be working well now.