I have the following architecture:
ProjectName
- dist
- img
- index.html
- src
- assets
- fonts
- img
- public
- img
I save static images in ProjectName/src/assets/img/
And save dynamic images (images that user uploaded) in public folder with path ProjectName/public/img from my Flask backend. I'm doing this because I want to get image on the fly without use webpack build
So, I can view images in developer mode use
return require('../../public/img/paintings/'+imgName)
But when I use production mode I must write without first ../
return require('../public/img/paintings/'+imgName)
Because dist folder has shorter path to public folder than non build project
How I come to agreement with different paths and don't change code before build?
I think I found solution for my problem.
I read answer https://stackoverflow.com/a/52083358/10683019 and understood that require using src folder and all works after changed return like in answer
Related
I wrote a line which shows a picture like
And my asset folder is structured as
Yet this is throwing
Solutions I've tried:
Tried using
.
Still the same problem.
Any solutions?
Your screenshot shows assets under public, but your import URL uses the # prefix, which is a common alias for <projectRoot>/src.
You can move public/assets to src/assets so that the #/assets URL would be found:
public/assets --move--> src/assets
This solution has the advantage of minimizing the build output, only including files that are actually used in code. The included images also go through Webpack's processing, e.g., if you've configured image optimization.
Alternatively, you can keep public/assets and use a static asset URL, which is the base URL prefixed to the path under public. For the play.img and a base URL of / (the default), the static URL would be /assets/img/play.img:
<img src="/assets/img/play.img">
When I publish the project: npm run build a folder that I created with images is missing from the dist folder.
I created this folder inside the src folder.
assets folder is also missing.
Where is it?
If you just want some folders included verbatim, put them in the public folder.
Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.
Things within src are only included if they're part of the bundle (ie they have been imported / required) and even then, any folder structure won't be preserved. Bundled items are typically renamed with a hash checksum and all put into a single folder like js, css, images, etc.
i am currently working in a Nuxt.js project and i'm trying the Pre Rendering option. I would like to change the format name of the files created when i launch nuxt generate... but i don't really now if this is even possible.
If my pages folder has these 2 componentes:
pages\
- page1.vue
- page2.vue
the default situation is that my dist folder will have these files after the generate command:
dist\
- page1
- index.html
- page2
- index.html
Would be possible to have this structure?:
dist\
- page1.html
- page2.html
I've tried to create my own router.js with my custom paths, using #nuxtjs/router module and it works in dev mode, but when i try to generate the static files, there are no errors... but it doesn't work. No page files in dist folder.
Perhaps i'm missing something, or perhaps it is not possible to do this, but... has anyone faced this situation?
Add generate.subFolders false in your nuxt config:
generate: {
subFolders: false
}
I am a bit new to Vue.js. I am doing a social media application that allows users to upload and share images with others. I store my images in src/assets folder during development. However, when I build the project, all images are put in the dist folder. Therefore, what can I do to enable users to still upload images on production? Do I create the assets directory in the dist folder?
I have since tried different ways, including storing images on the backend. In dooing this, I reference the backend path relatively, using, for example, ../../../backend/public/assets..., and it works on development. However, when I build, the images that existed in the backend directory at the time of building are visible, however, whenever I try uploading more on production to the ../../../backend/public/assets... directory, they are uploaded successfully but are not visible (that is on production). I get an error that Cannot find module './image_name.image_extension'.
What am I doing wrong?
I have seen similar questions like this but there was no answer.
You must set your public path and change your way!!
first step to do is creating vue.config.js in your root directory, if you want to know more details, read this: https://cli.vuejs.org/config/
for example, I define prefix path for my files:
module.exports = {
publicPath:
process.env.NODE_ENV === "production" ? "/" : "/",
};
remember, It's better if you use "#" to define your paths.
for example, if you want to load a image which located in src/assets/files/img/myImage.png, you can use #/assets/files/img/myImage.png in template section for binding or script section of your .vue files!
It always help you to find correct path of your files.
and finally your way is not standard because "src/assets/..." will used for compiled scripts and styles and also your files which you want to use on your UI layout like static images. so you have to use "public/assets/..." directory to save your file, then you will see everything is going well for you.
if you have a more question or stuck solving this problem again, I'm here to fix your issues.
My project has static folder and asset folder.
I use quasar dev to build project and the building project is stored in dist folder. But in the dist folder, it only has static folder, it doesn't has asset folder.
How can I let asset be packaged in dist folder?
I also had some struggle working with these two directories in Quasar. So I was very happy when I found this page in the documentation. The difference between assets and statics is described as follows:
Assets vs Statics
Files in the “assets” folder are only included in your build if they have a
literal reference in one of your Vue files. Every file and folder from the > “statics” folder are copied into your production build as-is, no matter what.
So I guess that you currently do not use any of the files inside the assets directory in at least one of your components.
Example: One possible way to make logo.png be part of the dist folder is to use the asset in a Vue component like this (also taken from the docs): <img src="~assets/logo.png">. Afterwards run quasar build and check the output in your dist folder. Good luck!