react 圖像識別

If you're new to React and are having trouble accessing images stored locally, you're not alone.

如果您不熟悉React，并且無法訪問本地存儲的圖像，那么您并不孤單。

Imagine you have your images stored in a directory next to a component like this:

想象一下，您的圖像存儲在這樣的組件旁邊的目錄中：

/src/components- component1- component2 /img- img1- img2

And you're trying to access the images in the /img directory from component2:

而且您正在嘗試從component2訪問/img目錄中的圖像：

import React, { Component, useState, useEffect } from 'react'; import { render } from 'react-dom' import { useTransition, animated, config } from "react-spring"; import imgArr from './images'; import '../App.css';const Slideshow = () => {const [index, set] = useState(0)const transitions = useTransition(imgArr[index], item => item.id, {from: { opacity: 0 },enter: {opacity: 1 },leave: { opacity: 0 },config: config.molasses,})useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), [])return transitions.map(({ item, props, key }) => (<animated.divkey={key}className="bg"style={{ ...props, slideshowContainerStyle}}><img className="img" src={require(item.url)} alt=""/></animated.div>)) }const slideshowContainerStyle = {width: '80%',height: '300px' }export default Slideshow;

You've tried the paths ../img/img1.jpg and ..img/img1.jpg, but get Error: Cannot find module '<path>' .

您已經嘗試了../img/img1.jpg和..img/img1.jpg路徑，但得到Error: Cannot find module '<path>' 。

So what's going on here?

那么這是怎么回事？

關于create-react-app (A little about create-react-app)

Like most people, you probably used create-react-app to bootstrap your project.

像大多數人一樣，您可能使用了create-react-app來引導您的項目。

In that case, using relative paths can be a bit tricky because create-react-app builds the HTML, CSS, and JavaScript files to an output folder:

在這種情況下，使用相對路徑可能會有些棘手，因為create-react-app將HTML，CSS和JavaScript文件構建到輸出文件夾中：

/public- index.html- bundle.js- style.css

There are a number of ways to use images with create-react-app, but one of the easiest is to include your images into /public. When your project is built, /public serves as the root directory.

通過create-react-app有多種使用圖像的方法，但是最簡單的方法之一就是將圖像包含在/public 。 構建項目時， /public充當根目錄。

You can read more about adding images or other assets in the Create React App docs.

您可以在Create React App文檔中閱讀有關添加圖像或其他資產的更多信息。

匯入圖片 (Importing images)

If you took a look at the docs, you'll notice that the code includes import statements to load assets like images and fonts.

如果您看一下文檔，您會注意到該代碼包含import語句，以加載諸如圖像和字體之類的資產。

Importing is useful when your asset, in this case an image, is in the same directory or near the component that uses it, and won't be used anywhere else. For example, if you have an input component with buttons that use SVGs for thumbs up and thumbs down icons.

當您的資產(在這種情況下為映像)位于使用該資產的目錄中或該組件附近，并且在其他任何地方都不會使用時，導入很有用。 例如，如果您有一個帶有按鈕的輸入組件，這些按鈕使用SVG表示大拇指和大拇指向下的圖標。

A bit advantage of using import is that it will throw an error during build time if there's a typo. This sort of checking helps ensure users won't see a broken image that slipped by.

使用import一個優點是，如果有錯字，它將在構建期間引發錯誤。 這種檢查有助于確保用戶不會看到滑動的破損圖像。

翻譯自: https://www.freecodecamp.org/news/unable-to-find-images-based-on-url-in-react/

react 圖像識別

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的react 图像识别_无法在React中基于URL查找图像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。