Vue 3、Vuetify 3、Vue-CLI 和 TypeScript 静态资产路径

Question

I'm leveraging one of the Vuetify 3.0.4 Beta template, I notice that when I include an image in the assets folder- if I perform a build I do not see the included image in my bundle. The current structure:

root
- dist
- public
- src
- - assets
- - - logo.png
- - views
- - components
- - App.vue
- - main.ts

So, if I access a relative path inside a view via:

<v-img src="../assets/logo.png" />

The asset will be included in my bundle, but if I attempt to access via the App.vue I continually get a 404 asset not found. Inside the App.vue I have done both of these:

<v-img src="@assets/logo.png" /> 
<v-img src="@/assets/logo.png" />

The @ should automatically point to root/src path- but for some odd reason it is not being included in the bundle. Any thoughts would be terrific-

---

Update:

vue --version
@vue/cli 5.0.6

I do the following:

vue create client

Vue CLI v5.0.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

cd "client"
vue add vuetify

? Choose a preset: Vuetify 3 Preview (Vuetify 3)
? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds are intended for development testing and may include bugs or other issues.) No

Then I add an image directly into the assets folder, then in the "app.vue" I immediately go add my the <v-img src=".." /> to the path of the new image and I do not see the assets folder being included in the console window and continue to get a 404 resource not found.

GET http://localhost:8080/assets/images/application-title.png 404 (Not Found)

If I traverse the page source, I do not see it included as a resource either after I build.

Answer 1

The problem is vue-loader does not automatically transform <v-img>.src into a require call (unlike <img>.src ).

You can manually add the require call in your src binding:

<v-img :src="require('@/assets/application-title.png')" />

GitHub fix