0

I'm trying to add an image as background to a div.

I've tried countless times, but it does not work, nothing is returned and no error appears.

I just came across this link, but the solution proposed by the user did not help me solve the problem

vue cli 3 – use background image in style tag

<div class="" style="background-image: url('~@/assets/imagens/bg-01.jpg');">
     <span class="login100-form-title-1">Sign In</span>
</div>

vue -V = 3.9.2

Emiry Mirella
  • 567
  • 1
  • 7
  • 21
  • Can you check the console.log and provide the error here? – Raja Sekar Jul 09 '19 at 19:20
  • I do not make any changes to the script I just put this string in the url ... and also nothing appears on my console. What should I put to return the error? – Emiry Mirella Jul 09 '19 at 19:22
  • check in your network tab, it should show image loading error. – Raja Sekar Jul 09 '19 at 19:24
  • Okay, the preview is all blank. and in the header is Request URL: http: // localhost: 8080/~@/assets/imagens/bg-01.jpg Request Method: GET Status Code: 304 Not Modified will the url be wrong? – Emiry Mirella Jul 09 '19 at 19:31
  • I went on the homepage where you have the vue logo, and look how the url of the image is http: // localhost: 8080 / img / logo.82b9c7a5.png I added the other image and it appeared here but no div does not appear :/ http: // localhost: 8080 / img / bg-01.ff63ad61.jpg – Emiry Mirella Jul 09 '19 at 19:34
  • Maybe try a relative link instead of the `~@/...` one? e.g.: `../../assets/images/....`? – Rashad Saleh Mar 21 '23 at 08:58

1 Answers1

0

Although it has been more than 3 years, you may have already solved your problem. I'm writting this answer for other who encounter similar issues. If the solution in the link above does not work for you, I have another suggestion:

<template>
   <div class="" :style="`${background}`">
       <span class="login100-form-title-1">Sign In</span>
   </div>
</template>
<script>
    import background from '~@/assets/imagens/bg-01.jpg'
    export default {
           data() {
                return {
                      background,
                }
           }
    }
</script>

I hope it can be helpful. However, I don't think it's suitable because we often store files on the cloud.

I'm sorry if my unhelpful answer wasted your time.

Shu Kyuseishu
  • 1
  • 1