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.
Related
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.
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.
Why does FineUploader's template/default.html look for files in the client folder? When you follow the set up instructions on their website you are left with something that looks like this:
root#UbuntuVM:/usr/local/nginx/html/example.com/wwwroot# ls
0.0.0.0 fine-uploader-gallery.css placeholders
all.fine-uploader.js fine-uploader-gallery.min.css processing.gif
all.fine-uploader.min.js fine-uploader.min.css retry.gif
composer.json fine-uploader-new.css template.html
composer.lock fine-uploader-new.min.css templates
composer.phar iframe.xss.response.js trash.gif
continue.gif LICENSE vendor
edit.gif loading.gif
fine-uploader.css pause.gif
And in the template folder there is a default.html file that looks for client/fine-uploader.js. I followed the instructions - why is the default template not working?
The Fine Uploader HTML templates serve as a starting point for your web app. It is expected that you make appropriate adjustments based on the location of your resources and your desired look and feel.
I am new in CI - and the framework is awesome.
These are the best answers I can get:
- CodeIgniter: How do I include a .js file in view?
- Codeigniter: How to include javascript files
I am trying to include js/css files but:
My CI folder including application and system are not installed on the http(/var/www/)[for default installation] folder, I placed somewhere else. So i assume their installations above are in http default folder, I have :
http:/var/www
CI:
/opt/codeigniter
+aplication
+system
Thank you so much in advance
Use this code
<script href="<?php base_url().'path/to/file' ?>" type="text/javascript"></script>
The javascript folder should be outside the application folder
app_folder
-application
--views
--controllers
-system
-css
-js
Hope this helps
How to install phpThumb in codeigniter framework. I have placed the files like below floder struture
/uploads
/cache
/images
phpthumb.bmp.php
phpthumb.class.php
phpThumb.config.php
phpthumb.filters.php
phpthumb.functions.php
phpthumb.gif.php
phpthumb.ico.php
phpThumb.php
phpthumb.unsharp.php
When i place this phpThumb files in upload folder my webpage showing empty, when i remove those files then the webpage loading correct. How could i resolve this and let me know hopw to install the PHPThumb in my codeigniter framework
Place pHP thumbe folder in root directory of project