vue.js webpack项目中静态图片路径的写法

作者: 守星的犬 | 来源:发表于2018-08-17 15:46 被阅读284次

vue.js webpack项目中静态图片路径的写法
20 .在vue项目中遇到的问题和解决方案
.vue文件插入图片
(工作相关)webpack打包图片没有打入
使用webpack搭建一个前端项目
Vue基础七
windows的命令行运行node_modules/.bin/w
webpack 静态资源集中输出的方法示例
Webpack 入门
使用webpack打包时图片路径问题

本来很简单的代码却折腾了半天，无非就是循环数组，把项目里的静态图片路径绑定在图片地址上。

<div class="icon" v-for="item of iconList" :key="item.id">
                <div class="icon-img">
                    <img class="icon-img-content" :src="item.imgUrl" />
                </div>
                <p class="icon-desc">{{item.title}}</p>
            </div>

:src="item.imgUrl" 这个值怎么赋值都不行，后来发现给图片的URL加上require()就可以了。

image.png

vue.js webpack项目中静态图片路径的写法
本来很简单的代码却折腾了半天，无非就是循环数组，把项目里的静态图片路径绑定在图片地址上。 :src="item.i...
20 .在vue项目中遇到的问题和解决方案
vue-cil和webpack中本地静态图片的路径问题解决方案 height & line-heightheigh...
.vue文件插入图片
一直接这么写会被webpack当成字符串处理，引用的并不是真正的图片路径，正确写法：二
(工作相关)webpack打包图片没有打入
使用webpack打包, 发现图片没有打包, 路径找不到, 该成使用require静态资源, 打包时候会自动打入,...
使用webpack搭建一个前端项目
Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源？ JS .js .jsx ....
Vue基础七
Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源？ JS .js .jsx ....
windows的命令行运行node_modules/.bin/w
这个路径是linux下的写法，在windows中运行要用反斜杠 PS: webpack4之后webpack-cli...
webpack 静态资源集中输出的方法示例
目录结构 copy-webpack-plugin 工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资...
Webpack 入门
一、什么是Webpack？作为其核心，webpack是一个静态模块捆绑器。在特定项目中，webpack将所有文件...
使用webpack打包时图片路径问题
webpack打包时会分析图片的src路径，在打包相应图片的同时，修改图片的src路径为打包后图片的位置。因此，...