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.
I'm looking for the right url to reference static assets, like images within Vue javascript.
For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found):
Main.vue:
var icon = L.icon({
iconUrl: './assets/img.png',
iconSize: [25, 25],
iconAnchor: [12, 12]
});
I've tried putting the images in the assets folder and the static folder with no luck. Do I have to tell vue to load those images somehow?
For anyone looking to refer images from template, You can refer images directly using '#'
Example:
<img src="#/assets/images/home.png"/>
In a Vue regular setup, /assets is not served.
The images become src="data:image/png;base64,iVBORw0K...YII=" strings, instead.
Using from within JavaScript: require()
To get the images from JS code, use require('../assets.myImage.png'). The path must be relative (see below).
So your code would be:
var icon = L.icon({
iconUrl: require('./assets/img.png'), // was iconUrl: './assets/img.png',
// iconUrl: require('#/assets/img.png'), // use # as alternative, depending on the path
// ...
});
Use relative path
For example, say you have the following folder structure:
- src
+- assets
- myImage.png
+- components
- MyComponent.vue
If you want to reference the image in MyComponent.vue, the path sould be ../assets/myImage.png
Here's a DEMO CODESANDBOX showing it in action.
A better solution would be
Adding some good practices and safity to #acdcjunior's answer, to use # instead of ./
In JavaScript
require("#/assets/images/user-img-placeholder.png")
In JSX Template
<img src="#/assets/images/user-img-placeholder.png"/>
using # points to the src directory.
using ~ points to the project root, which makes it easier to access the node_modules and other root level resources
In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL.
computed: {
iconUrl () {
return require('./assets/img.png')
// The path could be '../assets/img.png', etc., which depends on where your vue file is
}
}
See VueJS templates - Handling Static Assets
Right after oppening script tag just add import someImage from '../assets/someImage.png'
and use it for an icon url iconUrl: someImage
this finally worked for me, image passed as prop:
<img :src="require(`../../assets/${image}.svg`)">
What system are you using? Webpack? Vue-loader?
I'll only brainstorming here...
Because .png is not a JavaScript file, you will need to configure Webpack to use file-loader or url-loader to handle them. The project scaffolded with vue-cli has also configured this for you.
You can take a look at webpack.conf.js in order to see if it's well configured like
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
...
/assets is for files that are handles by webpack during bundling - for that, they have to be referenced somewhere in your javascript code.
Other assets can be put in /static, the content of this folder will be copied to /dist later as-is.
I recommend you to try to change:
iconUrl: './assets/img.png'
to
iconUrl: './dist/img.png'
You can read the official documentation here: https://vue-loader.vuejs.org/en/configurations/asset-url.html
Hope it helps to you!
It works for me by using require syntax like this:
$('.eventSlick').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
arrows: true,
draggable: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev"><img src="' + require("#/assets/img/icon/Arrow_Left.svg")+'"></button>',
Having a default structure of folders generated by Vue CLI such as src/assets you can place your image there and refer this from HTML as follows <img src="../src/assets/img/logo.png"> as well (works automatically without any changes on deployment too).
I'm using typescript with vue, but this is how I went about it
<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
export default class MyPage extends Vue {
MyImage = "../assets/images/myImage.png";
}
</script>
You could define the assets path depending on your environment
const dev = process.env.NODE_ENV != 'production';
const url = 'https://your-site.com';
const assets = dev ? '' : url;
<template>
<img :src="`${assets}/logo.png`"/>
<p>path: {{assets}}</p>
</template>
<script>
export default {
data: () => ({
assets
})
}
</script>
Ideally this would be inside an utils js file, or as an extended app defineProperty, like:
const app = createApp(component);
app.config.globalProperties.$assets = assets;
app.mount(element);
and will be available as:
<template>
<img :src="`${$assets}/logo.png`"/>
<p>path: {{$assets}}</p>
</template>
<script>
export default {
mounted() {
console.log(this.$assets);
}
}
</script>
load them in created, mounted or where you need them
async created() {
try {
this.icon = (await import('#assets/images/img.png')).default;
} catch (e) {
// explicitly ignored
}
and then
<img :src=icon />
Inside code you can directly require image using.
const src = require("../../assets/images/xyz.png");
Or
In order to dynamically load image need this.
const image = new window.Image();
image.src = require("../../assets/images/xyz.png");
image.onload = () => {
// do something if needed
};
I have a project with multiple layouts, I have added the CSS globally in nuxt.config.js file like this:
css: [
'#/assets/plugins/fontawesome-free/css/all.min.css',
'#/assets/plugins/ionicons/css/ionicons.min.css',
'#/assets/plugins/feather/feather.css',
'#/assets/css/style.css',
'#/assets/css/custom-style.css',
'#/assets/css/skins.css',
]
but I want for just 1 layout to remove all css imported because the file being served is a static HTML file with all the styles inline.
Is this possible in nuxt and if not, what is the best possible workaround?
You could add the css files in your layout in a normal style block and not in nuxt.config.js.
<style lang="scss">
#import ...;
</style>
Then you can use another layout without these css files.
Remove the scope from your style on the .vue file where you want to override the global style:
<style s̶c̶o̶p̶e̶d̶>
.ProseMirror p {
color: rgb(236, 10, 10);
}
</style>
I wonder too, if you would be better off creating new vue layout files in the layout folder and applying those styles to the pages you want to affect globally, instead of pulling the css through nuxt.config.js file. Then, on the specific page that you want to override the global style, just remove the scope as I mention above. Just a thought.
I built my app with vue-cli-service build and then deployed to GitHub following this guide.
But the only thing that appears on the page is the toolbar. The Vue components are missing from the v-content. This is what's rendered on the site where the content should be.
<main class="v-content" style="padding: 64px 0px 0px;" data-booted="true"><div class="v-content__wrap"></div></main>
No console errors as clues. I am wondering if I need to configure vue.config.js differently, or perhaps vue-router..
Here is my vue-config:
module.exports = {
transpileDependencies: [
'vuetify',
],
publicPath: '/my-gh-pages-site/',
};
Update: I was able to load the rest of the compnents by adding the correct base to vue-router like so:
const router = new VueRouter({
base: '/my-gh-pages-site/',
routes,
});
The app is still failing to make some REST calls, which makes me suspicious that some of the javascript is missing.
Ok, I figured out a solution for my problem but I would like to know if anyone can help me understand why this happened.
My app.js has:
app.use(express.static(__dirname + '/public'));
and static files are served as expected.
Except, when I tried to add a background image in my css:
html {
background: url(img/tree.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I had the error:
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3000/css/img/tree.jpg". localhost/:1
Now when I change the CSS to
/img/tree.jpg
The file is served correctly -- so here is a question -- there shouldn't be any file at /css/img/tree.jpg so why does the server think an image is sent with text headers instead of just returning resource not found?
Thank you for your help!
Ok figured this out.
I had another route set up to serve up an angular page to consume my REST api.
app.get('*', function(request, response) {
var options = {
root: __dirname + '/public/'
}
response.sendFile('./views/index.html', options);
});
This meant that when the path was set incorrectly in the CSS file for the background image I THINK that express just went ahead and tried to serve up the index.html file. This meant the CSS page was saying that the file was an image, but the server was saying that the file was html. This is why the header appeared to be wrong and there wasn't just a broken link when the app tried to load the image.