带有 webpack require() 的 Vue.js 动态图像 src 不起作用

发布于08月05日

我正在try 将image src动态绑定到表单../assets/project_screens/image_name.jpg的URL.

我的目录 struct 如下所示:

- src
 -- assets
   ---- project_screens
 -- profile
   ---- ProjectList.vue 
 -- store
   ---- profile.js

我知道我需要使用webpack的require("path/to/image")来帮助webpack构建这些图像，但路径无法解析.

// store/profile.js
projects = [
  {
    ....
  },
  {
    ....
    img_url: "../assets/project_screens/im1.jpg"
    ....
  }
  ....
]

// profile/ProjectList.vue
<md-card
   class="md-layout-item project-card"
   v-for="(project, idx) in projects"
   :key="idx"
 >
    <md-card-media>
        <img :src="require(project.img_url)" alt="People" />
    </md-card-media>
</md-card>

如果我使用一个URL字符串而不是动态传递URL字符串，它就会工作.环顾堆栈溢出，没有一个解决方案能起到作用.我还缺什么吗？

推荐答案

我终于明白了！！如果文件名完全以变量形式给出，则Webpack无法导入该文件，如:

require(imageUrl) // doesn't work

这是因为如果路径存储在变量中，它在编译时不知道路径.

但是，当在require()中为Webpack提供字符串插值时，它可以检测要Bundle 的文件，例如:

require(`../assets/profile_screens/${filename}`) // Works

这是因为Webpack在编译时知道路径"./assets/profile_screens"，所以它可以包含文件夹中的所有文件.

Vue.js相关问答推荐

为什么发送 POST API 请求时主体对象没有react ？

Vue Router中.getRoutes()获取的路由顺序优化建议

如何将字符串中的
解析为 VUE.js 中的 html 标记

Vue + Webpack 构建显示空白页面

在 Vue 项目之间共享assets和组件

Vuelidate 判断true/false

为什么 vue 中的 @mouseover 操作不起作用

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

在 vue-router 中带有路由的 Vuejs2 模态

验证子组件Vue vee-validate

加载时焦点文本框上的 Vue.js

Vue组件未在laravel 5.3中使用Passport 显示

将登录页面包含在单页应用程序中是否不安全？

使用 Vue.js 获取所有选中复选框的列表

使用 vuejs 动态设置 id 标签

IOS在输入焦点上显示键盘

Vue - 重用方法的最佳方式

在~/components/AddPlaceModal.vue中找不到导出AddPlaceModal

Vuetify v-data-table 固定标题不起作用

这个业务逻辑有多少属于 Vuex？

实用课程推荐