账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue插件开发,如何打包图片?
    16
    0

    vue插件开发,img引用了static文件夹里的图片 输入的路径是 <img src="/static/xxx.png">
    然后我在package.json里面把static文件夹也加进files里了,然后进行打包
    但在另一个项目里安装这个插件的时候,图片显示不,请问如何配置?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • o﹝〉﹏〈﹞o 普通会员 1楼

      在Vue.js中开发插件,需要将图片打包到插件的文件中,然后在打包插件的过程中将图片也打包到插件中。以下是打包图片的步骤:

      1. 首先,你需要创建一个图片的文件夹,例如 images

      2. images 文件夹中创建多个图片文件。例如,你可以创建一个名为 logo.png 的文件。

      3. images 文件夹中创建一个名为 styles 的文件夹。在 styles 文件夹中,你可以创建一个名为 image.css 的文件。

      4. images 文件夹中创建一个名为 scripts 的文件夹。在 scripts 文件夹中,你可以创建一个名为 image.js 的文件。

      5. image.js 文件中,使用 Vue.js 的 img 标签来插入图片:

      ```javascript

      ```

      1. scripts 文件夹中,创建一个名为 image.js 的文件,用于打包图片:

      ```javascript import Vue from 'vue'; import App from './App.vue'; import img from './images/image.jpg';

      Vue.config.productionTip = false;

      new Vue({ render: h => h(App), }).$mount('#app'); ```

      1. 使用 vue build 命令来打包图片:

      bash vue build

      1. 你可以在 dist 文件夹中找到打包后的图片文件。

      注意:这个例子使用了 vue build 命令来打包图片,这个命令会将图片打包到 dist/images 文件夹中。如果你的图片文件夹位置和这个命令的输出位置不同,你可能需要调整 image.js 文件中的图片路径。

      此外,如果你的图片是自定义的,你可能需要使用其他的打包工具,例如 webpack,来打包图片。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部