img 用require方式引入图片后出现的问题

来源：7-18 猜你喜欢-显示内容

慕工程2357144

2017-07-29

因为线上图片无法加载，所以将图片放置本地，然后将部分地址放到mock数据中

然后采用img方式引用根据webpack图片打包发现引入方式需要采用require('././'+变量）方式

图片是可以加在出来，但是引入require后会出现下列问题：

1、npm start 出现警告不影响显示

2、npm run build 除了上述警告之外还有另外一个问题

之前试过引入html-withimg-html 插件可以解决第一个问题但是第二个问题还不知道如何解决？

然后想问下老师为何引入require后会出现上述问题？

有没有什么方法可以避免上述问题的同时采用img方式引入图片？

写回答

1回答

双越

2017-07-29

你在 mock数据中的图片地址，应该是线上就能访问的图片地址，是绝对路径的 url 而不能是相对路径。

这样的话，你在 React 中即可 <img src={data.img}/> 这样写了

双越

慕工程2357144

自己起一个静态服务，把图片放在那里，用这个服务来提供图片的访问，试一下。

2017-07-30

共2条回复

React高级实战打造大众点评Web App

已经对React Router4与Webpack2进行了项目升级

1711 学习 · 707 问题

相似问题

回答 1

回答 3

回答 4

回答 1

回答 1