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 :)
Related
I am trying to add an image , in one of the Vue app , i am using "./assets/logo.png"
the url of Vue app is http://localhost:8080/#/
What can be the cause of the error ?
Answers Appreciated
For this to work you need to require the image source, add an extra . at the start so you go out of the components folder, and include .png on the end of it:
{ ... image: require("../assets/logo.png") }
The require is something to do with webpack not knowing where you're referring to without it.
Change "./assets/logo.png" to require('../assets/logo.png')
This tells Webpack to search for that image at that location and replace the reference with an actual value at render time.
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
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).
Follow up to this question:
apply downloaded CSS on windows 8 metroUI app
So, yes, Windows says "for security reasons, you cannot navigate to HTML you have downloaded to this location and you cannot run any executable or potentially executable code, such as script or CSS. It is intended for media such as images or videos and the like."
But I really, really want to use that css file from my local storage. Shouldn't I be able to use the execUnsafeLocalFunction method to bypass this restriction like this?:
MSApp.execUnsafeLocalFunction(function () {
el["href"] = "ms-appdata:///local/style.css"
});
It still throws "An app can’t load remote web content in the local context."
I also tried just reading the file with localFolder.getFileAsync and readText, but nothing seems to help. Is there really no way to work around this?
I think I found a way to get the CSS to load.
I tested the code below by adding a css file that sets the body background to red in the local storage folder.
The code reads the contents of the file, creates a style tag in the head and adds the content of the css file to the style.
var url = new Windows.Foundation.Uri(filename);
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(url).then(function (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function(text) {
var style = document.createElement("style");
style.innerText = text;
document.getElementsByTagName("head")[0].appendChild(style);
});
});
I've a bit experience with qt+ and creating not so complex web pages, but I don't know how begin with titanium...when I run the default app this work...I can change the index.html like a web page...I can include javascript code and jquery too...very nice...but when I try run api functions I don't know how include these...all examples talk about iphone and a app.js file...I'm trying make a desktop app and don't appear any .js...I can create these but don't work
...in the docs I read things like these:
var win = Ti.UI.createWindow(); var view = Ti.UI.createView({backgroundColor:"red"}); win.add(view); win.open();
I don't know where I've put this code...I try put it inside a javascript inside the html (bad practice!) but it don't work...I put it inside a function onload but don't work neither.....there are any "convention" with the names for the files for this work?...I think this is like create a very dynamic web page but I don't know how work with the api....I see the example "kitchen something" but it wasn't so clear to mee...I see a examples like this:
http://mobile.tutsplus.com/tutorials/appcelerator/appcelerator-using-json-to-build-a-twitter-client/
but seems this work different when is an ipod to when it is a desktp app...I create an app.js (like the tuto) and put my code inside it but it never run...I look the source code and only need create a .js and inside my "home.html" link it..but it don't work...I create a index.js too but it don't work neither
please help..I'm very noob...thanks
Aaron:
This reply kindly brought something that could have been a solution but just made me lose more than 15 minutes of my time, as these first online courses have info about how to create a new project with a default html file, not about the original poster's issue.
The original poster's issue is that he has a new project with an index.html file, but no app.js file.
And he then doesn't understand where he could put the sampe code :
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);
win.open();
... as whatever he puts in app.js is not executed.
The documentation in Titanium Dev Center fails to provide accurate information as it only mentions Titanium Mobile app.js and does not speak of index.html in the application structure.
After some starting experience on Titanium Mobile, I had to work on Titanium Desktop andactually just had the same problem as angel_ang, which brought me here.
So, here is the real answer :
Titanium Desktop applications do not need or start with an app.js file, but with index.html.
Deleting or removing this file never works as it will still be launched from the last build if need be.
Adding anything to app.js will never run as only index.html is run as a starting place.
Something that should have been a solution was found that to the following link:
http://www.youtube.com/watch?v=lgGVNB2nkKc&NR=1
This video is two online courses further from the link supplied by Aaron. At 0.19 seconds exactly, we see the starting code he has added to index.html.
You need to put a ... in your HEAD section, and add a function() there.
You may put the sample code inside this function.
Then you may even set the function to run when you click a button ().
Unfortunately, this doesn't work with me either.
I tried with the example code above but also with the other example (notification) mentioned in the online course.
It just seems that something is deprecated here and many documentations are outdated.
Anyone that could answer to this situation would be very helpful to us and many newcomers.
We just have an index.html that we can't use, instead of a running app.js file.