I'm using laravel-mix withe vueJS and I'm having issue on how to properly set-up the image directory.
Here's my initial mix set-up
mix
.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.copy("resources/assets", "public/images/" );
as you can see, I'm copying all the content of resources/assets folder to public/images/ folder
so this image assets/svg/logo-white.svg will be on images/svg/logo-white.svg
Now here's where I'm lost.
//using this
src="/assets/svg/logo-white.svg"
//result is obviously same (wrong url)
src="/assets/svg/logo-white.svg"
//using this
src="#/assets/svg/logo-white.svg"
// the result is (wrong url it lacks svg folder)
src="/images/logo-white.svg?c381d0781c93aa7ea138a64f7ea3f17d"
//using this
:src="'#/assets/svg/logo-white.svg'"
//result (another wrong)
src="#/assets/svg/logo-white.svg"
if I add .setResourceRoot("") to my mix config
//using this
src="#/assets/svg/logo-white.svg"
//results to this,
src="http://localhost:8080/images/logo-white.svg?c381d0781c93aa7ea138a64f7ea3f17d"
//which supposedly a wrong URL but its weirdly working
//I have no idea why its showing the images when the image is on /images/svg/ folder not in /images/
So as you can see, using src="#/assets/blabla.jpg" only work if all my images are inside the root of images folder, but doesn't work inside child folder of the images folder.
and adding .setResourceRoot("") works in a mysterious way which I dont really want to gamble as I'm not sure what will happen with this on production
would appreciate any help on this and clarification on how I can properly get the image url and why its behaving this way
Related
I'm using Vue 3 along with Tailwind and in my template I display a list of background images, so I'm looping through an array of images and this div is responsible for showing them:
<div :class="`h-full bg-[url('#/assets/img/${article.preview_image}')] bg-center bg-no-repeat bg-cover hover:scale-105 transition duration-[2000ms] ease-in-out`" />
This way it doesn't work although I have no errors in the console and when I check the DOM it's rendered alright, the images just don't show up
The weird part is that when I hard code the name of the image like bg-[url('#/assets/img/my_image.jpg')] it works, and when I go back to using my loop variable it still works although it was not working at first, and it's not cache related because I disabled it
And then when I restart the server the images are gone again
Any idea what's causing this?
By the way, the data comes from a data.json file, if it matters. Like:
[
{ preview_image: 'xxx.jpg'},
{ preview_image: 'xxx.jpg'}
{ preview_image: 'xxx.jpg'}
]
I tried to use a .ts file instead but the problem remains
This may be a webpack issue where your image files are not bundled correctly. I se you have tried a .ts file. Can you try again but use require("filePath"), with the image files. This ensures that the files are bundled.
Cheers :)
I'm changing background image on hover.
The code for image url looks like this:
background-image: url('../assets/img/project1.png');
But when I look in the Chrome inspector it looks like this:
background-image: url(/img/project1.9fba20d0.png);
So when I try to change image need that code (9fba20d0) for it to work.
Why dose '9fba20d0' appear? How do I remove it or get it without hardcoding it?
I actually haven't used Vue.js, but I'm sure the random string appended to end of filename is for "cache busting" purposes.
Basically, the string changes each time you build your application so the next time you request index.html from the server it will reference the new filename (with a different random string at the end). If there was no string, the browser would look locally to find the file, which may be an outdated version, if you've made changes since last rebuild.
I'd try and understand how Vue.js is creating your production "assets", i.e. all the images and other static files and see if you have some options to change the default behavior, if need be. Might have to read the documentation pertaining to caching.
Hope that at least points you in the right direction!
I have got two components in vue, one with lightbox for images and one for playing audio. I got relative links to the assets but either the images or the audio is being displayed and played. First I thought it was an issue with the component itself but since it doesnt work on either of these it might be something else.
If I provide an absolut url it works however fine for some reason
This doesnt work either when I build the application or locally:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "../assets/music/myfile.mp3",
// LITEBOX
images: [
".../assets/img/myimage.jpg",
This works fine:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "http://mypage.com/music/myfile.mp3",
// LITEBOX
images: [
"http://mypage.com/img/myimage.jpg",
I can of course upload the images and music separate and make it work but it feels a bit inconvenient.
What can be wrong?
UPDATE:
Thanks for the answers. Now I got two methods. And both actually works.
One is to put all my assets in the public folder. That solved it with a link like:
"/assets/img/myimage.jpg",
The other way is to using require.
require("../assets/img/myimage.jpg"),
Both works but is there a prefered way?
You should use require when using assets
file1: require("../assets/music/myfile.mp3")
Without require webpack won’t know that you want to bundle that asset and your path will remain unchanged. Actually webpack knows how to handle this kind of files thru the use of plugins and not out of the box.
Regarding the fact that it works with absolute path and not relative ones.
Your relative path is valid in the local file system on your dev server. When deploying the app you are not running in the local file system, but on the web. Even though relative paths are resolved using a similar algorithm, your results will depend on the URL where the component is used and not on the path of the vue file.
For example if the component is rendered on a URL of the form
https://example.com/list/
The relative path would resolve to https://example.com/assets which is probably what you want. But on the following URL
https://example.com/list/1/
Will resolve to https://example.com/list/assest which isn’t what you’d expect.
Webpack takes care of this problems (to some degree, you need to be sure that you don’t mess up the base tag).
In a UWP app using cppwinrt I want to use WebView to display contents of a book kept in the Assets folder. I read that it is necessary to reference an html asset this way for use as a Uri argument to the Navigate method in web view:
TheWebView.Navigate(Uri(L"ms-appx-web:///SampleBook/PageOne.html"));
This produces an empty view, while
TheWebView.Navigate(Uri(L"ms-appx:///SampleBook/PageOne.html"));
crashes. Msdn says that for files "that will be loaded into the web compartment" one must use ms-appx-web, and I've seen mention that this is a security issue. But does that mean the files are in a special location within the project - i.e. not merely in the Assets folder - or does it only mean that the path must begin with ms-appx-web independent of the file's location? "Web compartment" is not explained but seems to be not a location but rather a classification of the type of resource. At any rate, neither of the above approaches works, so I'm curious to know the recommended way to store and access a collection of html files in the package. In the assets folder? A special folder within assets? In Solution Explorer the html file is listed, "content" is True, and the file is Included In Project. Thanks.
My mistake: ms-appx-web does not point to the assets folder, but to its parent. The correct path for content of this type would be ms-appx-web///Assets/SampleBook/PageOne.html. The reference to material to be "loaded to the web compartment" apparently is just a way of saying: stuff to be loaded with WebViewer.
I have a path problem when using loadImage() and loadStrings() in Processingjs. I would like to have my sketches and their associated files (images, text files) in one place and to be able to call them from another on my site.
For example, I am trying to run a Processingjs sketch located at
www.example.com/sketches/mysketch.pde from the page www.example.com. This works fine when there are no external files.
Alas the problem starts when I need to use loadImage() and loadStrings() to look for images and texts to load. It defaults to www.example.com/image.jpg and not to the sketch location, www.example.com/sketches/image.jpg.
The need for #pjs preload makes matters worse.
Without moving the files and without hardcoding, is there a way to
tell Processingjs to look for the files to load in the same folder as
the .pde and not the .html?
I hope this is clear. Any help would be appreciated!
Short answer: no.
Even native Processing won't behave the way you want in this sense, because you'll be executing your sketch from [...]/sketches/ and any resource call is local to that directory.
Similarly, with processing.js your resources are located relative to the "directory" you're in, which for www.example.com/ is just the base dir. What you can do, however, is place your .pde file in the same dir as your .html file, or vice versa.
#pjs preload is necessary to effect "immediate" file loading. If you don't preload it, your sketch will have to deal with asynchronous load instructions. Quite literally, loadImage without a preload directive behaves the same as requestImage (http://processing.org/reference/requestImage_.html)