I can't show images at react vite and also jquery.js and main.js index.html too
<SwiperSlide className="slider-bg d-flex justify-content-center align-items-center" data-background="assets/img/slider/slider-bg-2.jpg">
can you help me solve this solution?
From the description I can only assume that you are not using data-background as a custom attribute and since I cannot find anything about data-background being anything but a custom attribute I can only assume it is not being used correctly. If you do not have a very imortant reason for using data-background I would suggest that you try this instead:
import importedPicture from './relative/path/to/picture.png'
<SwiperSlide className="slider-bg d-flex justify-content-center align-items-center" style={{ backgroundImage: `url(${importedPicture})` }}>
Related
I want to make a component that gets a String prop with the name of the image
<script setup>
const props = defineProps({
image: String,
}
)
</script>
I tried using the required function as solution given in nuxt but this doesnt work in nuxt 3 and i cant find an alternative
<div class="col-4 h-100 text-center">
<h1>Picture</h1>
<img :src="require(`../assets/${image}.jpg`)" />
</div>
I only tried using a normal src attribute to test if it can find the image and that works.
I have an image url fetched from an API and I want to display it as a background image. Is there any way I can implement this with tailwindcss or should I use styles attribute?
I think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.
I would do:
style={{backgroundImage: `url(${fetchedImgSrc})`}}
Edit:
It looks like you can actually use Tailwind to do something similar to the code above as per https://tailwindcss.com/docs/background-image.
The code looks like:
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
I think I have found a solution other than simply using a style attribute.
<div
style={{'var(--image-url)': fetchedUrl}}
className='bg-[image:var(--image-url)]'>
<!-- ... -->
</div>
This works perfectly fine.
Although it looks a bit tedious, it can be used to enable the background image on hover, focus, etc. In which the style attribute is incapable of.
className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'
This application of custom properties can be used for implementing dynamic values with tailwind like colors fetched from an API.
<div
style={{'var(--color)': fetchedColor}}
className='text-[color:var(--color)]'>
<!-- ... -->
</div>
you can just use backgroundImage in Style
const bag2 = "https://via.placeholder.com/500"
<div
className = "someting"
style={{backgroundImage: `url(${bag2})`}}
</div>
Even with the latest implementation of the arbitrary-values - it seems like it's not working for Dynamic URLs.
In my case image was coming from an API. If it is the case, stick to style attribute.
In the solution below - bgImage is a prop.
<div className={`justify-center bg-no-repeat bg-cover bg-center rounded-lg`}
style={{ backgroundImage: `url(${bgImage})`}} >
<!-- Children here-->
</div>
If you are having this same issue in 2022, then this is what helped me with tailwind version ^3.0.23. I just moved the image to the public folder and used the link in my tailwind.config.js like so backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" } where /public/img is the directory where I placed the image within the public folder, yours might different. and then called the css like so bg-cover-pic within my project, and that was all it took.
I just went to html to jsx online converter https://magic.reactjs.net/htmltojsx.htm the pasted what I copied from tailwind website -
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
then I just copied my new generated jsx code-
style={{ backgroundImage: 'url(/about.jpg.webp)' }}
I am using TailwindCSS in a Nuxt project and I am trying to add a background image to a header element. The tailwindCSS official docs solution for this is the following : <div class="bg-fixed ..." style="background-image: url(...)"></div>
I have an images folder in the webpack assets folder where my bitcoin.jpg image lives.
I have tried using <header class="bg-fixed" style="background-image: url(~assets/images/bitcoin.jpg)"
This is not working, I have also tried classbinding, that doesn't work either. Anyone got an idea about a fix?
Thanks in advance!
Try this (EDIT: This doesn't work, scroll down):
<header class="bg-fixed" style="background-image: url(~#/assets/images/bitcoin.jpg)"
The ~ tells webpack to treat the url as a module request, then you need to use a correct alias. In nuxt, these are usually prefixed with #.
EDIT
I didn't realize that there's something strange going on under the hood with Webpack. That syntax works with src attributes, but Webpack won't do the path resolution for background-image.
Here's the real fix:
<header class="bg-fixed" :style="{'background-image': `url(${require('#/assets/images/bitcoin.jpg')})`}"
By using require, you signal to Webpack to use the file-loader to create the proper module path, and replace that in the url function.
Working example: https://codesandbox.io/s/late-mountain-zdw09?file=/pages/index.vue
Quote for reference:
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
Page where the quote is from: https://vuejs-templates.github.io/webpack/static.html
Ref: https://github.com/vuejs/vue-loader/issues/646
The header hasn't got any content, nor height or width so it is not displayed. And you can't see the background.
A working solution would be :
<div class="bg-fixed w-full" style="background-image: url('/images/bitcoin.jpg'); min-height: 200px;" />
I added 100% width and 200px min-height.
And also, you seemed to miss the single quotes around the image path.
bg-fixed isn't quite the best solution, you should try bg-cover or bg-contain with
bg-no-repeat
https://tailwindcss.com/docs/background-size#class-reference
package.json
"nuxt": "^3.0.0"
"#nuxtjs/tailwindcss": "^6.1.3"
1
<header class="bg-fixed bg-[url('assets/images/bitcoin.jpg')]"/>
2
<header class="bg-fixed" :style="{ backgroundImage: `url('assets/images/bitcoin.jpg')` }"/>
3
<header class="bg-fixed" :style="`background-image: url('assets/images/bitcoin.jpg')`"/>
I need to change the picture on the mouseover.
I have this code inside of odoo in products tab in the shop:
<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920" data-oe-type="image" data-oe-expression="product.image_1920" class="d-flex h-100 justify-content-center align-items-center"><img src="/web/image/product.template/2/image_256/A4Tech%20Bloody%20V8M?unique=0a360e4" class="img img-fluid" alt="A4Tech Bloody V8M"/></span>
And only thing that changes between the products is data-oe-id. Problem is that, only span tag, inside of which image is, has the some reasonable id. But image don't. So, I guess I can't use the getelementbyid.
Additional question - How I could extract the gif name from the database, if I am using odoo, and it is a new module. Also, if it is possible, how I could call the javascript function from odoo module.
https://jsfiddle.net/jy51ascu/
HTML(changed image only):
let image = document.querySelectorAll('span[data-oe-id="2"] img');
image[0].addEventListener("mouseover", function( event ) {
event.target.src = "https://via.placeholder.com/100x100?text=2";
}, false);
<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920" data-oe-type="image" data-oe-expression="product.image_1920" class="d-flex h-100 justify-content-center align-items-center"> <img src="https://via.placeholder.com/100x100?text=1" class="img img-fluid" alt="A4Tech Bloody V8M" /></span>
I am new to react.js and JS in general.
I am looking for an example of code that:
uses react functions, not classes.
let the user upload an image using
then display that image on the screen
Thanks in advance.
First image should copy in to project path and import that into your page
import img from "../../assets/img/logo.svg";
render() {
return (
<div className="content" >
<img id="logo-img" src={img} alt="logo" />
</div>
)
}