I have a issue in tailwind css when i use bg-"[url('.assets/images.png')]" these is not working when i put online image address the image is coming what could be the issue with local images as i frustrated doing and doing but not geeting any
solution
A explaination would be helpful and correct syntax would be helpful
In your code there is typo, url is outside the []
Change
bg-url['(<imagepath)']
to
bg-[url('<imagepath>')]
Extra: Procedure:
When using asset image make sure you add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:
tailwind.config.cs
module.exports = {
theme: {
extend: {
backgroundImage: {
'images': "url('.assets/images.png')", 👈 add your image here
}
}
}
}
Then use it as
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
Refer: https://tailwindcss.com/docs/background-image
I don't know the syntax of tailwind css, but it looks like your path '.assets/images.png' is not valid because of the '.assets' part. Try to find out where your image are located in relation to your resulting css file.
If they are organized like
assets/
images/
css/
styles.css
you can write
bg-"[url('../images/images.png')]"
If it's like
assets/
images/
public/
css/
styles.css
you can write
bg-"[url('../../assets/images.png')]"
But as I said I don't know tailwind.
After seeing your Screenshot and the organization of your files I think that
class= "bg-url[('Assets/images.png')]"
will lead to success, because your assets folder is located in the same folder as your index.html and it seems a good idea to write the path inside the quotation marks, not the brackets.
Related
I'm trying to display a dynamic image with v-bind and it s not working
in template tag:
<img v-bind:src="test" />
in script tag :
data() {
return {
items: [],
imagesref: "",
test: '~/assets/captures/ref_01_03_2022_17_05_21/#DHRD-52484/user language check dates in different language/1.png'
};
I tired to use the test path on an img tag to check if there's something wrong with the path but it worked fine.
how can i fix this
v-bind:src works as expected. The problem is your path makes no sense in the context of your web page.
To translate a project path into a web path, use vue-loader. Namely:
test: require('./relative/path/to/image.png')
Or you can make use of the existing transform rules.
Note: This might vary based on configuration, but in a standard Vue project, replacing ~/assets with #/assets should fix the problem, without needing require().
I have a Nuxt Content project, which fetches a number of content files like so:
/content/resources/item.yaml
---
item:
title: Hello World
pdf: sample.pdf
Which is pulled into the Vue component:
async asyncData({ $content }) {
const resources = await $content('resources').fetch()
return { resources }
},
Where should the PDF file go in the Nuxt folder structure? and how should it be referred to in the YAML file? I'm trying something like:
/content/resources
-- item.yaml
-- sample.pdf
and then in Vue: <a :href="item.pdf" ..., which always just results in https://url/sample.pdf, which does not load obviously. What is the obvious thing I am missing, as I can't find it anywhere in the Nuxt Content docs?
/content/resources
-- item.yaml
/assets/files
-- sample.pdf
and referencing /assets/files/sample.pdf also doesn't work.
The Nuxt Content docs describe using static assets for this.
Move sample.pdf to static/ in the root of your Nuxt project (e.g., in static/sample.pdf), and then use its static-relative path in your pdf YAML property:
pdf: /sample.pdf
The issue is how to get Vue to render the correct path for an asset, if the path to the asset and the assets name is passed through as a props.
Explanation:
When using a Vue component... if passing in props which contain a path and a file name of an asset to be loaded
export default{
name: 'NewComponent',
props: ["path","file"],
computed:{
calculateCompletePath (){
return this.path+""+this.file;
}
}
}
If using something like the above in a manner such as:
<template>
<div>
<video>
<source :src="calculateCompletePath" type="video/mp4"/>
</video>
</div>
</template>
How can you get the src portion to render correctly - e.g Vue generates its own string referencing the media folder for example
/media/movie.6ac43bcf.mp4
Side note:
I've read somewhere there is the possibility to using require (<<asset>>) but that doesn't seem to work if used on the computed function e.g. return require (this.path+""+this.file);
Any ideas how to get this to work?
Please refer this document for a detailed explanation on how to resolve static assets:
https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
I think the problem is that your asset(in this case an mp4 file) is not located in your computer's /media folder.
See these 3 points for a better understanding: https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
If your media folder is located under the root folder(/), then, the computed value /media/movie.6ac43bcf.mp4 will work.
If your media folder is under src folder of the app, your computed property should return #/media/movie.6ac43bcf.mp4
If your media folder is somewhere else, then you should create a proper path using #/ or the ./ symbol to reach the file correctly.
What am I doing?
I am using the intersection observer API to make lazy loading.
What have I tried?
I tried the code in a simple HTML page and it works perfect, but when I use the code in vue, the images won't load (local images). If I put a htttp source images (online images) it works perfect, too. I think this is a webpack error config. Am I right? How can I fix it?.
Whats the error?
When i use a local image the code doesnt work, if only change that src with something else like this image https://images.pexels.com/photos/69817/france-confectionery-raspberry-cake-fruit-69817.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 the code WORKS, why i cant make it work with local images?
HTML AND SCRIPT
<template>
<div class="container" id="section3">
<span class="containerTitle">Galeria</span>
<div class="wrapper">
<img v-lazyload data-src="#assets/images/001.jpg" class="card">
</div>
</div>
</template>
<script>
import lazyload from '../directives/lazyload'
export default {
directives:{
lazyload
},
}
</script>
DIRECTIVE
export default{
inserted: el =>{
const options = {
// root:
rootMargin: '0px 0px 0px 0px',
threshold:1
}
var observer = new IntersectionObserver((entries,observer) =>{
entries.forEach(entry => {
if(entry.isIntersecting){
el.src = el.dataset.src
observer.unobserve(el)
console.log('intersecting');
}
})
},options)
observer.observe(el)
}
}
CODE IMAGE
FOLDER
The issue is with your image path.
You can fix it with either using public folder and give it in path.
You can also check for auto suggestion which come up while typing, this may help you to check whether your path is correct or not.
Like this
Your path is wrong. You gave ../assets/images/001.jpg as the path to the image (as stated in your question), but according to your directory tree it's ../assets/001.jpg (or write it like #/assets/001.jpg, # points to root of project). That should fix it.
As far as I remember you can't use # sign inside <template>.
So you can either:
require it
<img v-lazyload :data-src="require('#assets/images/001.jpg')" class="card">
import it
<template>
...
<img v-lazyload data-src="image" class="card">
...
</template>
<script>
import img from '#assets/images/001.jpg';
...
data() {
return {
image: img,
}
}
...
</script>
use relative path
<img v-lazyload data-src="../assets/images/001.jpg" class="card">
You can check how it works in Vue docs
I can't remember why this works, but you need to use the following syntax:
<img v-lazyload data-src="~assets/images/001.jpg" class="card">
with the ~ replacing the ../.
I will update the answer if I figure out exactly why.
doing extensive research i found this article about vuejs and static assets.
https://edicasoft.com/weblog/2018/04/27/static-vs-srcassets-webpack-template-vue-cli/
They said that this kind of problems occurs "because" of webpack,like i though, so the solution for this (i hope not the only solution), but this is the solution so far...
QUOTE
All asset URLs such as , background: url(...) and CSS #import are resolved by Webpack as module dependencies like require('./logo.png').
We then use loaders for Webpack, such as file-loader and url-loader, to process them. Webpack template has already configured these loaders.
File-loader helps to determine the final file location and how to name it using version hashes for better caching. Thus you can put your static assets near your .vue files and use relative paths. There is no need to put them strictly into the ‘assets’ folder.
Url-loader helps to conditionally inline assets such as base64 data URL, reducing the amount of HTTP requests.
So what the hell should I do with it?
The answer is: put your assets in the ‘src’ folder.
I tested this and it works perfect BUT you CANT make a subfolder and this for me, is disorganized.
This is the final folder structure to get this done using intersection observer api as vue directive!
So, here I've got a locally stored file named "its_me.pdf" in the assets folder.
I'm trying to reference a download to the PDF using an HTML tag
<a href="../assets/its_me.pdf" download>PDF</a>
It is a real PDF file, if I go double click on the file manually I can see it display and it's real. However, when I go to my application on: http://localhost:4200/its_me (name of route in which it lives), and click on the link, I get a "Failed - No File" error.
Based on #AkashBhave answer I was able to get to work this way.
In my script tag:
data () {
return {
publicPath: process.env.BASE_URL
}
}
then in my template.
<a:href="`${publicPath}whatever.pdf`" download="download">PDF</a>
Alternatively with webpack, in your vue.config.js you add this;
chainWebpack: config => {
config.module
.rule("pdf")
.test(/\.pdf$/)
.use("file-loader")
.loader("file-loader");
}
then in the script tag;
data () {
return {
pdfLink: require("#/assets/whatever.pdf"),
}
}
Finally, in the template;
<a :href="pdfLink" download="download">PDF</a>
Relative imports should work by default with Vue. Try putting your PDF file into the /public folder of your application.
You can then reference the file using string interpolation, like so:
<link rel="icon" href="<%= BASE_URL %>its_me.pdf">
More information is available at
https://cli.vuejs.org/guide/html-and-static-assets.html#interpolation
If that doesn't work, something might be wrong with your Webpack or build configuration.