Nuxt•10mo ago

Vue Router warning for background-image

I do not know why i keep receiving the Vue router warning on background-image and it doesnt display, when the image path is correct. <img src> able to display the image, the very same image.

<li>             
              <p
                class="bg-fixed"
                style="
                  background-image: url('../assets/images/pexels-dimitri-kuliuk-1488315.jpg');
                  background-size: cover;
                  background-position: center; 
                  height: 300px;
                  width: 100%; 
                  display: flex;
                  align-items: center; 
                  justify-content: center; 
                  color: white; 
                "
              >
                Jessica Maddinton<br />&<br />Brian Owell
              </p>
          </li>
          <li>
            <img src="../assets/images/pexels-dimitri-kuliuk-1488315.jpg" />
          </li>

<li>             
              <p
                class="bg-fixed"
                style="
                  background-image: url('../assets/images/pexels-dimitri-kuliuk-1488315.jpg');
                  background-size: cover;
                  background-position: center; 
                  height: 300px;
                  width: 100%; 
                  display: flex;
                  align-items: center; 
                  justify-content: center; 
                  color: white; 
                "
              >
                Jessica Maddinton<br />&<br />Brian Owell
              </p>
          </li>
          <li>
            <img src="../assets/images/pexels-dimitri-kuliuk-1488315.jpg" />
          </li>

1 Reply

danielroe•10mo ago

The issue is that vite will transform the img src into the correct path but it doesn't know to do it for the style background-image. You could move it into your ~/public directory and reference it with absolute path, or import the url to the image into your component.

Gaming

Programming

Vue Router warning for background-image