pakuss
commented
4 months ago Hi, I just figured it out so I thought why not help people :)
Basically my structure looks something like this:
<resource>/nui/src/assets/image.png
then I added a simple <img src="assets/image.png" to the app.vue component. Then (the most important part actually) you have to edit webpack.mix.js and copy the contents of your assets folder (or whatever folder really) to the /dist folder in the root of the application. You can do it with either single files, or just copy the entire folder into the /dist folder. I copied the entire directory with:
.copyDirectory('src/assets', 'dist/assets') (add it to the file somewhere in between lines 41 and 46)
After that build the application with whatever (npm run dev/watch/prod) and most important: restart the server. Otherwise you won't see the image (the server doesn't load it dynamically). I was getting 404 GET responses because of this and was wondering what I was doing wrong. Hope you understand it and that it helps you :)
Hey, So I tried out your template and saw that after adding a new file and Directory hierarchy "/assets/images/img.png" it is not displaying inside FiveM.
While using npm run watch, there is a new Folder created inside nui/images containing all the images used inside the projects, so I added them into fxmanifest.lua, but still no image is displaying inside FiveM.
I tried the same replication of this Vue app inside the browser on a fresh template and it works just fine displaying the image.
Do you know any solution to that? I tried other vue Boilerplates which managed to work prefectly but most of them are overloaded with typescript and other tools or are really outdated.
Well here is a screenshot of the Image not displaying inside FiveM.
This might have something to do with the way its built? But im not sure since I'm not an expert.
P.S.: Working with Image links from the web (copying the src link and pasting into the project) works fine
thanks in advance.