Where to put vue image files

In a Vue project, image files can be placed in the static resource directory (static or public), assets subdirectory or component file. You can reference images using the src attribute and use different paths depending on where the image is placed.

Vue image file placement location

In a Vue project, image files are usually placed in the following locations:

1. Static resource directory in the project root directory

• Name: static or public
• Generally place static resources such as images, fonts, CSS and JavaScript

2. assets Subdirectory

• src/assets
• Dedicated to placing images, icons and media files

3. Within component files

• For images that need to be embedded into components, you can place them in the component file:
  src/components/MyComponent.vue

  <template>
  <img src="/static/imghwm/default1.png"  data-src="./image.jpg"  class="lazy" alt="My Image">
  </template>

How to cite pictures?

• Use src Attribute:

  <img src="/static/imghwm/default1.png"  data-src="/static/image.jpg"  class="lazy" alt="My Image">

• Relative to component file path:

  <img src="/static/imghwm/default1.png"  data-src="./image.jpg"  class="lazy" alt="My Image">

• For images embedded in component files, use relative paths:

  <img src="/static/imghwm/default1.png"  data-src="@/assets/image.jpg"  class="lazy" alt="My Image">

The above is the detailed content of Where to put vue image files. For more information, please follow other related articles on the PHP Chinese website!