vue.js v-img无法从资源文件夹中找到资源[重复]

plupiseo  于 2023-02-24  发布在  Vue.js
关注(0)|答案(2)|浏览(140)
    • 此问题在此处已有答案**:

(9个答案)
2天前关闭。
我在使用v-img Vuetify组件显示位于src/assets/images/logo.png文件夹的静态图像时遇到问题。

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

它不能用Vuetify加载,但是使用一个普通的img标签,它确实找到了资源。而且vscode提供了图像相对路径的完成,所以我不知道为什么vuetify不能正确加载它。

wbgh16ku

wbgh16ku1#

由于vue的编译器特性transformAssetUrls,它可以在<img>上运行。Vuetify的vite插件对此进行了预设,以支持vuetify组件:

// 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

llmtgqce

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';

相关问题