(9个答案)2天前关闭。我在使用v-img Vuetify组件显示位于src/assets/images/logo.png文件夹的静态图像时遇到问题。
v-img
src/assets/images/logo.png
<v-img src="@/assets/images/rima_logo.png"></v-img>
它不能用Vuetify加载,但是使用一个普通的img标签,它确实找到了资源。而且vscode提供了图像相对路径的完成,所以我不知道为什么vuetify不能正确加载它。
img
wbgh16ku1#
由于vue的编译器特性transformAssetUrls,它可以在<img>上运行。Vuetify的vite插件对此进行了预设,以支持vuetify组件:
transformAssetUrls
<img>
// vite.config.js import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify' export default { plugins: [ vue({ template: { transformAssetUrls } }), vuetify(), ], }
https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#image-loading
llmtgqce2#
如果您已经在vue.config.js中配置了路径别名,那么您的代码看起来没有问题:
module.exports = { ... chainWebpack: (config) => { config.resolve.alias .set('assets', resolve('src/assets')); }, };
维生素配置:
export default function ({ command }: ConfigEnv): UserConfigExport { const isProduction = command === 'build'; const root = process.cwd(); return { root, resolve: { alias: [ // /@/xxxx => src/xxxx { find: '@', replacement: resolve(__dirname, 'src'), }, { find: /\/#\//, replacement: pathResolve('types') + '/', }, { find: /^~/, replacement: '' }, ], }, server, plugins: createVitePlugins(isProduction), build: { sourcemap: true, }, }; }
还有一些其他的解决方案,也应该工作:
需要使用
<v-img :src="require(@/assets/images/rima_logo.png)"></v-img>
将图像作为资源导入:
// template <v-img :src="rimaLogo"></v-img> // scripts import rimaLogo from 'assets/images/rima_logo.png';
2条答案
按热度按时间wbgh16ku1#
由于vue的编译器特性
transformAssetUrls
,它可以在<img>
上运行。Vuetify的vite插件对此进行了预设,以支持vuetify组件:https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#image-loading
llmtgqce2#
如果您已经在vue.config.js中配置了路径别名,那么您的代码看起来没有问题:
维生素配置:
还有一些其他的解决方案,也应该工作:
需要使用
将图像作为资源导入: